.vid-sys.vid-col {

    .coll-hero {
        position: relative;
        overflow: hidden;
        aspect-ratio: 16 / 6;
        display: flex;
        align-items: flex-end;
    }

    @media (max-width: 768px) {
        .coll-hero {
            aspect-ratio: 4 / 3;
        }
    }

    /* Highlight glow uses inherited --text-color so it tints with the
       flipped palette instead of always being white. */
    .coll-hero-overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 75% 30%, hsl(from var(--background) h s l / 0.5), var(--inner-theme) 100%);
        pointer-events: none;
    }

    .coll-hero-body {
        max-width: 60ch;
    }

    @media (prefers-reduced-motion: reduce) {
        .back-link {
            transition: none;
        }
    }
}