.video-sound-slider-list { display: flex; aspect-ratio: 1920 / 1080; }
.video-sound-slider-item { width: 100%; position: relative; cursor: pointer; transition: 0.3s linear; }
.video-sound-slider-item-image { width: 100%; object-fit: cover; height: 100%; aspect-ratio: 16 / 9; }
.video-sound-slider-item:before { content: ''; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: 0.3s linear; }
.video-sound-slider-item:not(.active):before { opacity: 1; pointer-events: none; }
.video-sound-slider-item:after { content: ''; background: url(/static/img/play.png); opacity: 0; pointer-events: none; filter: invert(1); width: 80px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; background-size: cover; aspect-ratio: 1 / 1; transition: 0.3s linear; }
.video-sound-slider-item.active:after { width: 120px; padding: 0px; opacity: 1; pointer-events: none; }
.video-sound-slider-video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 30; opacity: 0; pointer-events: none; }
.video-sound-slider-item.video-show .video-sound-slider-video { opacity: 1; pointer-events: all; transition: 0.6s linear; }

@media (pointer:fine) {
    .video-sound-slider-item:not(.active):hover:before { opacity: 0; pointer-events: none; }
    .video-sound-slider-item:not(.active):hover:after { opacity: 1; pointer-events: all; }
    .video-sound-slider-item.active:hover:after { padding: 10px; }
}

@media (min-width:641px) {
    .video-sound-slider-list:has(> :nth-child(2)) { aspect-ratio: 1914 / 753; }

    .video-sound-slider-list:has(> :nth-child(2):last-child) .video-sound-slider-item { width: 30%; }
    .video-sound-slider-list:has(> :nth-child(2):last-child) .video-sound-slider-item.active { width: 70%; }

    .video-sound-slider-list:has(> :nth-child(3):last-child) .video-sound-slider-item { width: 15%; }
    .video-sound-slider-list:has(> :nth-child(3):last-child) .video-sound-slider-item.active { width: 70%; }
}

@media (max-width:1400px) {
    .video-sound-slider-item.active:after { width: 100px; }
}

@media (max-width:1200px) {
    .video-sound-slider-item:not(.active):after { width: 60px; }
    .video-sound-slider-item.active:after { width: 80px; }
}

@media (max-width:767px) {
    .video-sound-slider-item:not(.active):after { width: 40px; }
    .video-sound-slider-item.active:after { width: 60px; }
}

@media (max-width:640px) {
    .video-sound-slider-list { aspect-ratio: auto; }
    .video-sound-slider-list { display: block; }
    .video-sound-slider-item, .video-sound-slider-item.active { width: 100%; }
    .video-sound-slider-item:not(.active) { aspect-ratio: 16 / 5; }
}