.hero-cinematic-slide .hero-video,
.bg-slider .hero-cinematic-slide .hero-video-poster {
    object-position: center;
}

.hero-cinematic-slide .hero-video-control {
    left: 28px;
    right: auto;
    width: 44px;
    height: 44px;
    border-color: #737680;
    background: #101116cf;
    transition: background-color .35s ease, border-color .35s ease;
}

.hero-cinematic-slide .hero-video-control:hover {
    background: #262831ed;
    border-color: #c5c8d1;
}

.hero-cinematic-slide .hero-video-control[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .hero-cinematic-slide .hero-video {
        display: block;
    }

    .hero-cinematic-slide .hero-media-plane {
        bottom: auto;
        height: 47%;
    }

    .hero-cinematic-slide .hero-media-plane::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 65%, #000);
        pointer-events: none;
    }

    .hero-cinematic-slide .hero-video,
    .bg-slider .hero-cinematic-slide .hero-video-poster {
        object-position: 80% center;
    }

    .hero-cinematic-slide .hero-video-control {
        display: grid;
        left: 16px;
        top: 96px;
        bottom: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cinematic-slide .hero-video,
    .hero-cinematic-slide .hero-video-control {
        display: none;
    }
}