.hero-background-slides,
.hero-background-slide,
.hero-color-overlay {
  position: absolute;
  inset: 0;
}

.hero-background-slides {
  z-index: 0;
}

.hero-background-slide {
  opacity: 0;
  transition: opacity 1s ease;
}

.hero-background-slide.active {
  opacity: 1;
}

.hero-background-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-color-overlay {
  z-index: 1;
  pointer-events: none;
}

.hero:before {
  z-index: 2;
  pointer-events: none;
}

.hero-grid {
  z-index: 3;
}

.hero-slider-controls {
  position: absolute;
  z-index: 4;
  bottom: 25px;
  left: 50%;
  display: flex;
  gap: 9px;
  transform: translateX(-50%);
}