.carousel {
  --carousel-gap: 1rem;
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 75rem;
  position: relative;
  width: 100%;
}

.carousel *,
.carousel *::before,
.carousel *::after {
  box-sizing: inherit;
}

.carousel__visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.carousel__viewport {
  overflow: visible;
  position: relative;
}

.carousel__slides {
  display: grid;
  gap: var(--carousel-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel__slide {
  margin: 0;
  min-width: 0;
}

.carousel__link {
  background: #ffffff;
  border: 1px solid #374151;
  border-radius: 200px;
  color: #111827;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.carousel__link:hover {
  border-color: #38620a;
}

.carousel__link:focus-visible,
.carousel__button:focus-visible,
.carousel__selector:focus-visible {
  outline: 3px solid #38620a;
}

.carousel__link:focus-visible {
  outline-offset: -4px;
}

.carousel__button:focus-visible,
.carousel__selector:focus-visible {
  outline-offset: 3px;
}

.carousel__image {
  aspect-ratio: 1 / 2;
  border-radius: 200px;
  display: block;
  object-fit: cover;
  width: 100%;
}

.carousel.is-active .carousel__viewport {
  overflow: hidden;
}

.carousel.is-active .carousel__slides {
  display: flex;
  transition: transform 600ms ease-out;
  will-change: transform;
}

.carousel.is-active .carousel__slide {
  flex: 0 0 calc((100% - 3rem) / 4);
}

.carousel.is-active:not(.is-ready) .carousel__slides,
.carousel.is-resizing .carousel__slides {
  transition: none;
}

.carousel__controls,
.carousel__selectors {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel__controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  z-index: 2;
}

.carousel__controls--previous {
  left: 0;
}

.carousel__controls--next {
  right: 0;
}

.carousel__button-icon {
  display: block;
  height: 1.5rem;
  width: 1.5rem;
}

.carousel__selectors {
  margin-block-start: 1rem;
}

.carousel__button,
.carousel__selector {
  align-items: center;
  background: #38620a;
  border: 2px solid #38620a;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
  padding: 0.25rem 0.25rem;
}

.carousel__button:hover,
.carousel__selector:hover {
  background: #294907;
  border-color: #294907;
}

.carousel__selector[aria-current="true"] {
  background: #ffffff;
  border-radius: 0.5rem;
  color: #111827;
}

.carousel__selector,
.carousel__selector:hover,
.carousel__selector[aria-current="true"] {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  color: transparent;
  font-size: 0;
  padding: 0;
}

.carousel__selector::before {
  background: #ffffff;
  border: 2px solid #38620a;
  border-radius: 50%;
  content: "";
  display: block;
  height: 0.75rem;
  width: 0.75rem;
}

.carousel__selector:hover::before {
  border-color: #294907;
}

.carousel__selector[aria-current="true"]::before {
  background: #38620a;
}

.carousel__selector[aria-current="true"]:hover::before {
  background: #294907;
}

@media (prefers-reduced-motion: reduce) {
  .carousel.is-active .carousel__slides {
    transition: none;
  }
}