/* A centered mobile AI gallery with neighboring films still visible. */
@media (max-width:767px) {
    html body.light-theme #main #showreel #ai-reels #aiProjectCarousel {
        width:var(--rp-ai-rail-width,100vw)!important;
        max-width:none!important;
        margin-inline:calc((100% - var(--rp-ai-rail-width,100vw)) / 2)!important;
        overflow:hidden;
    }
    html body.light-theme #main #showreel #ai-reels #aiGrid {
        box-sizing:border-box!important;
        width:100%!important;
        gap:12px!important;
        padding:12px calc((100% - var(--rp-ai-card-width,74vw)) / 2) 18px!important;
        scroll-snap-type:x mandatory!important;
        scroll-padding-inline:0!important;
        overscroll-behavior-x:contain;
    }
    html body.light-theme #main #showreel #ai-reels #aiGrid > .video-card {
        flex:0 0 var(--rp-ai-card-width,74vw)!important;
        width:var(--rp-ai-card-width,74vw)!important;
        scroll-snap-align:center!important;
        scroll-snap-stop:always;
        transform:scale(.94)!important;
        transform-origin:center 45%;
        transition:transform 280ms ease;
    }
    html body.light-theme #main #showreel #ai-reels #aiGrid > .video-card.rp-ai-centered {
        transform:scale(1)!important;
    }
    html body.light-theme #main #showreel #ai-reels #aiGrid .video-media-frame {
        border-radius:12px!important;
        isolation:isolate;
    }
    html body.light-theme #main #showreel #ai-reels #aiGrid .video-media-frame::after {
        content:""!important;
        display:block!important;
        position:absolute;
        inset:0;
        z-index:8;
        background:linear-gradient(90deg,rgba(9,17,30,.86),rgba(9,17,30,.4));
        opacity:1;
        transition:opacity 280ms ease;
        pointer-events:none;
    }
    html body.light-theme #main #showreel #ai-reels #aiGrid .rp-ai-after .video-media-frame::after {
        background:linear-gradient(90deg,rgba(9,17,30,.4),rgba(9,17,30,.86));
    }
    html body.light-theme #main #showreel #ai-reels #aiGrid .rp-ai-centered .video-media-frame::after {
        opacity:0;
    }
    html body.light-theme #main #showreel #ai-reels #aiGrid > .video-card:not(.rp-ai-centered) :is(.video-caption,.model-badges) {
        opacity:.36;
        transition:opacity 280ms ease;
    }
    @media (prefers-reduced-motion:reduce) {
        html body.light-theme #main #showreel #ai-reels #aiGrid > .video-card,
        html body.light-theme #main #showreel #ai-reels #aiGrid .video-media-frame::after {transition:none;}
    }
}