.adg{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px;max-width:1400px;margin:0 auto}
@media(max-width:600px){.adg{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:3px}}
.adg-i{position:relative;aspect-ratio:1;padding:0;border:0;background:#111;cursor:pointer;overflow:hidden;display:block;width:100%}
.adg-i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s,filter .25s}
.adg-i:hover img,.adg-i:focus-visible img{transform:scale(1.05);filter:brightness(.55)}
.adg-i:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.adg-noaudio{cursor:default}
.adg-cap{position:absolute;inset:auto 0 0 0;padding:4px 5px;font:600 11px/1.2 system-ui,sans-serif;color:#fff;text-align:left;opacity:0;transition:opacity .2s;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.adg-cap small{display:block;font-weight:400;opacity:.8}
.adg-i:hover .adg-cap,.adg-i:focus-visible .adg-cap,.adg-i.is-playing .adg-cap{opacity:1}
.adg-i.is-playing{box-shadow:inset 0 0 0 3px #f5c542}
.adg-i.is-playing img{filter:brightness(.6)}
.adg-eq{position:absolute;top:6px;right:6px;display:none;gap:2px;align-items:flex-end;height:14px}
.adg-eq i{width:3px;background:#f5c542;animation:adgb .8s ease-in-out infinite}
.adg-eq i:nth-child(2){animation-delay:.2s}.adg-eq i:nth-child(3){animation-delay:.4s}
.adg-i.is-playing .adg-eq{display:flex}.adg-i.is-paused .adg-eq i{animation-play-state:paused}
@keyframes adgb{0%,100%{height:3px}50%{height:14px}}