.lz-hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 2.5 / 1;
  overflow: hidden;
  background: #131313;
  isolation: isolate;
}

.lz-hero-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.lz-hero-slide.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.lz-hero-slider:has(.lz-hero-next) .lz-hero-slide {
  transition: opacity .7s ease, visibility 0s linear .7s;
}

.lz-hero-slider:has(.lz-hero-next) .lz-hero-slide.is-active {
  transition: opacity .7s ease, visibility 0s;
}

.lz-hero-slide picture,
.lz-hero-slide img,
.lz-hero-slide video {
  display: block;
  width: 100%;
  height: 100%;
}

.lz-hero-slide img,
.lz-hero-slide video {
  object-fit: cover;
  object-position: 50% 50%;
}

.lz-hero-next {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: rgba(0,0,0,.3);
  color: #fff;
  font: normal 26px/1 Arial,sans-serif;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.lz-hero-next:hover { background: #000; transform: translateX(2px); }
.lz-hero-next:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 1023px) and (min-width: 768px) {
  .lz-hero-slider { aspect-ratio: 16 / 9; }
}

@media (max-width: 767px) {
  .lz-hero-slider { aspect-ratio: 1 / 1; }
  .lz-hero-next { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .lz-hero-slider .lz-hero-slide,
  .lz-hero-next { transition: none !important; }
}

/* Keep a lightweight poster visible until the first video frame is presented. */
.lz-hero-slide .lz-hero-poster { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lz-hero-slide:has(.lz-hero-poster) video { opacity: 0; }
.lz-hero-slide.is-video-ready video { opacity: 1; }
.lz-hero-slide.is-video-ready .lz-hero-poster { visibility: hidden; }