[data-unit-carousel] { position: relative; aspect-ratio: 443 / 240; overflow: hidden; background: #202020; }
[data-unit-carousel] .unit-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
[data-unit-carousel] .unit-slide.is-active { opacity: 1; }
[data-unit-carousel] .unit-carousel-controls { position: absolute; inset: 0; pointer-events: none; }
[data-unit-carousel] button { pointer-events: auto; display: grid; place-items: center; position: absolute; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff80; border-radius: 50%; background: #080808b8; color: #fff; cursor: pointer; }
[data-unit-carousel] button:hover { background: #ff4d00; }
[data-unit-carousel] button:focus-visible { outline: 3px solid #ff4d00; outline-offset: 3px; }
[data-unit-carousel] [data-prev], [data-unit-carousel] [data-next] { top: 50%; transform: translateY(-50%); }
[data-unit-carousel] [data-prev] { left: 12px; }
[data-unit-carousel] [data-next] { right: 12px; }
[data-unit-carousel] svg { width: 20px; height: 20px; }
[data-unit-carousel] .unit-carousel-count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 20px; background: #080808b8; color: white; font-size: 14px; }
[data-unit-carousel] [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { [data-unit-carousel] .unit-slide { transition: none; } }