.video-grid article{cursor:pointer;transition:transform .3s,border-color .3s}
.video-grid article i{transition:background-color .25s,border-color .25s,box-shadow .25s,transform .25s;color:#fff}
.project>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.project:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,3,5,.96),rgba(3,3,5,.06) 80%);z-index:1}
.project>span,.project>h3,.project>p,.project>b{position:relative;z-index:2}
.thumbs button{cursor:pointer;opacity:.58;transition:.2s}.thumbs button.active,.thumbs button:hover{opacity:1;border-color:var(--purple)}.thumbs img{width:100%;height:100%;object-fit:cover}
.video-grid article:hover,.video-grid article:focus-visible{transform:translateY(-5px);border-color:rgba(243,107,61,.72);outline:none}
.video-grid article:hover i,.video-grid article:focus-visible i{background:var(--orange);border-color:#ffb095;box-shadow:0 0 0 8px rgba(243,107,61,.14),0 0 28px rgba(243,107,61,.75);transform:translate(-50%,-50%) scale(1.1)}
.filters{flex-wrap:wrap}
.filters small{opacity:.7}
.video-count{color:#777;font-size:13px;margin:-20px 0 28px}
.video-modal{width:min(1100px,94vw);overflow:hidden;padding:0}
.video-modal .close{position:absolute;z-index:5;right:14px;top:10px;margin:0;background:rgba(9,9,11,.75);width:42px;height:42px;border-radius:50%;color:#fff;border:1px solid rgba(255,255,255,.14);font-size:28px;cursor:pointer}
.video-player{aspect-ratio:16/9;background:#000}
.video-player iframe{display:block;width:100%;height:100%;border:0;background:#000}
.video-meta{padding:24px 28px 28px}
.video-meta h2{font-size:42px;margin:5px 0 20px}
@media(max-width:580px){.video-meta h2{font-size:32px}.video-meta{padding:20px}.video-player{aspect-ratio:4/3}}