/* VIDEOS */
.vids-page {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-top: clamp(130px, 14vw, 180px);
    padding-bottom: clamp(60px, 8vw, 100px)
}

.eyebrow {
    font: 700 12px/1 var(--body);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 18px
}

.vids-page h1 {
    margin: 0;
    font: 900 clamp(56px, 8vw, 120px)/.86 var(--display);
    text-transform: uppercase
}

.vids {
    list-style: none;
    margin: clamp(36px, 5vw, 56px) 0 0;
    padding: clamp(28px, 3vw, 40px) 0 0;
    border-top: 2px solid var(--ink);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 56px) clamp(16px, 2.2vw, 30px)
}

@media (max-width:980px) {
    .vids {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:560px) {
    .vids {
        grid-template-columns: 1fr
    }
}

.vid a {
    display: block;
    text-decoration: none
}

.poster {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--ink);
    display: grid;
    place-items: center;
    overflow: hidden
}

.poster::after {
    content: "*";
    position: absolute;
    right: 14px;
    top: 6px;
    font: 900 44px/1 var(--display);
    color: var(--red);
    opacity: .9
}

.play {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--red);
    display: grid;
    place-items: center;
    -webkit-transition: background .3s, -webkit-transform .35s cubic-bezier(.2, .7, .2, 1);
    transition: background .3s, -webkit-transform .35s cubic-bezier(.2, .7, .2, 1);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .3s;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .3s, -webkit-transform .35s cubic-bezier(.2, .7, .2, 1)
}

.play::before {
    content: "";
    margin-left: 5px;
    border-left: 18px solid #fff;
    border-block: 11px solid transparent
}

.plat {
    position: absolute;
    left: 14px;
    bottom: 12px;
    font: 700 11px/1 var(--body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7)
}

.vid a:hover .play,
.vid a:focus-visible .play {
    -webkit-transform: scale(1.12);
    transform: scale(1.12)
}

.vid a:hover h2 {
    color: var(--red)
}

.vid h2 {
    margin: 14px 0 4px;
    font: 700 16px/1.35 var(--body);
    -webkit-transition: color .25s;
    transition: color .25s
}

.vid.untitled h2 {
    color: var(--muted);
    font-weight: 500
}

.vid p {
    margin: 0;
    font: 500 12px/1.4 var(--body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.vid > span {
    background: var(--ink);
    display: block;
}

.vid iframe {
    width: 100%;
}