.hero[data-hero-carousel] > [data-hero-slide] {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease-in-out;
}
.hero[data-hero-carousel] > [data-hero-slide].is-active { z-index: -2; opacity: 1; }
.hero[data-hero-carousel] > [data-hero-slide].is-leaving { z-index: -3; opacity: 1; transition: none; }
.hero[data-hero-carousel] > [data-hero-slide] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focal, 50% 25%);
}
.hero-carousel__controls {
  position: absolute;
  left: 0;
  bottom: 17px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1px;
}
.hero-carousel__controls[hidden] { display: none; }
.hero-carousel__controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 44px;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: 50%;
}
.hero-carousel__controls button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.hero-carousel__controls [data-hero-goto]::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid rgb(255 255 255 / .85);
  border-radius: 50%;
  transition: background-color 180ms;
}
.hero-carousel__controls [data-hero-goto][aria-pressed='true']::before { background: #fff; }
.hero-carousel__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 599px) {
  .hero[data-hero-carousel] > [data-hero-slide] img { object-position: var(--hero-focal-mobile, 61% 50%); }
  .hero-carousel__controls { bottom: 16px; }
  .hero[data-hero-carousel] .hero-caption { left: 0; right: auto; bottom: 0; font-size: 8px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .hero[data-hero-carousel] > [data-hero-slide],
  .hero-carousel__controls [data-hero-goto]::before { transition: none; }
}
@media print {
  .hero-carousel__controls { display: none; }
  .hero[data-hero-carousel] > [data-hero-slide] { display: none; }
  .hero[data-hero-carousel] > [data-hero-slide]:first-child { display: block; opacity: 1; }
}