.vids{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:2px var(--gut) 6px;scroll-padding:0 var(--gut)}
.vids::-webkit-scrollbar{display:none}
.vid{position:relative;aspect-ratio:16/10;border:0;padding:0;border-radius:var(--r);overflow:hidden;background:var(--deep);scroll-snap-align:start;cursor:pointer;color:#fff;font:inherit}
.vid img,.vid iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,24,15,0) 45%,rgba(6,24,15,.8))}
.vid.on::after,.vid.on .play,.vid.on b{display:none}
.vid b{position:absolute;z-index:1;left:14px;bottom:12px;font-size:17px;font-weight:700;text-align:left}
.play{position:absolute;z-index:1;top:50%;left:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:var(--sun)}
.play::before{content:"";position:absolute;left:25px;top:19px;border-left:19px solid var(--sun-ink);border-top:12px solid transparent;border-bottom:12px solid transparent}
@media(min-width:760px){.vids{margin:0;padding-left:0;padding-right:0;grid-auto-columns:calc((100% - 28px)/3)}}