.vbv-grid {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto 7rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.2rem 1.5rem;
}

.vbv-card { min-width: 0; }
.vbv-card__frame { position: relative; display: block; width: 100%; aspect-ratio: 16/9; padding: 0; border: 0; background: #151515; overflow: hidden; cursor: pointer; }
.vbv-card__thumbnail { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vbv-card__play { position: absolute; inset: 0; display: grid; place-items: center; transition: background-color .2s ease; }
.vbv-card__play svg { display: block; width: 68px; height: 48px; filter: drop-shadow(0 2px 8px rgb(0 0 0 / .25)); transition: transform .2s ease; }
.vbv-card__frame:hover .vbv-card__play, .vbv-card__frame:focus-visible .vbv-card__play { background: rgb(0 0 0 / .12); }
.vbv-card__frame:hover .vbv-card__play svg, .vbv-card__frame:focus-visible .vbv-card__play svg { transform: scale(1.1); }
.vbv-card__frame:focus-visible { outline: 3px solid var(--red, #ed503d); outline-offset: 3px; }
.vbv-lightbox { position: fixed; z-index: 100000; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: rgb(0 0 0 / .88); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.vbv-lightbox.is-open { opacity: 1; visibility: visible; }
.vbv-lightbox__dialog { position: relative; width: min(100%, 1200px); }
.vbv-lightbox__close { position: absolute; z-index: 1; top: -3rem; right: 0; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / .65); border-radius: 50%; background: transparent; color: #fff; font: 300 2rem/1 Arial, sans-serif; cursor: pointer; }
.vbv-lightbox__player { aspect-ratio: 16/9; background: #000; box-shadow: 0 1.5rem 5rem rgb(0 0 0 / .35); }
.vbv-lightbox__player iframe { display: block; width: 100%; height: 100%; border: 0; }
.vbv-card__title { margin: 1rem 0 .5rem; color: var(--ink, #171717); font: 500 clamp(1rem, 1.25vw, 0rem)/1.15 var(--sans); letter-spacing: -.025em; }
.vbv-card__date { margin: 0; color: var(--red, #ed503d); font: 700 .7rem/1.4 var(--sans, Arial, sans-serif); letter-spacing: .13em; text-transform: uppercase; }
.vbv-empty { width: 100%; max-width: 1240px; margin: 0 auto 7rem; }
.vbv-empty p { color: var(--ink, #171717); }

@media (max-width: 900px) {
    .vbv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.1rem; }
}

@media (max-width: 760px) {
    .vbv-grid { width: 100%; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; }
    .vbv-empty { width: 100%; }
    .vbv-card__title { font-size: 1.1rem; }
    .vbv-lightbox { padding: 1rem; }
    .vbv-lightbox__close { top: -2.75rem; }
}