/*
 * Styles for the hero SLIDER - a feature added on top of the original
 * static design (which had a single fixed hero, not a slider), so the
 * original style.css (copied verbatim from the static site) has no rules
 * for these classes. Kept in a separate file so style.css stays an exact,
 * untouched copy of the original.
 */

/* The only thing actually needed: the visible slide is .hero's sole flex
   child (inactive slides are fully removed from rendering by the browser's
   own [hidden]{display:none}, nothing extra required for that) - it just
   needs the same full width the original design's lone .container relied
   on, since a flex item doesn't stretch along the main axis by default. */
.hero__slide {
  width: 100%;
}

.hero__dots {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  display: flex;
  gap: .6rem;
}
.hero__dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .6);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.hero__dot:hover {
  border-color: #fff;
}
.hero__dot.is-active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.15);
}