/* =========================================================
  hero.css – Full-bleed auto sliding background images
   ========================================================= */

.sb-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #f3f6fb;
  min-height: clamp(210px, 42vw, 400px);
}

.sb-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0;
  animation: sbHeroBgSlide 10s infinite linear;
}

.sb-hero__bg--1 {
  background-image: var(--sb-hero-bg-1);
  animation-delay: 0s;
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

.sb-hero__bg--2 {
  background-image: var(--sb-hero-bg-2);
  animation-delay: 5s;
}

@keyframes sbHeroBgSlide {
  0%,
  45% {
    opacity: 1;
  }
  55%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .sb-hero {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .sb-hero__bg {
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}