/* Centered image carousel (event flyers, etc.) */

.flyer-carousel {
  --flyer-carousel-size: min(22rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem auto;
  max-width: 100%;
  outline: none;
}

.flyer-carousel__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: calc(var(--flyer-carousel-size) + 6rem);
}

.flyer-carousel__viewport {
  width: var(--flyer-carousel-size);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y;
}

.flyer-carousel__slide {
  display: none;
  margin: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.flyer-carousel__slide.is-active {
  display: flex;
}

.flyer-carousel__slide .image-frame,
.flyer-carousel__slide img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: cover;
}

.flyer-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: var(--app-control-height, 2.625rem);
  height: var(--app-control-height, 2.625rem);
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.flyer-carousel__nav--prev {
  left: 0;
}

.flyer-carousel__nav--next {
  right: 0;
}

.flyer-carousel__status {
  margin: 0;
  color: var(--pico-muted-color);
  font-size: 0.875rem;
  text-align: center;
}

@media (max-width: 576px) {
  .flyer-carousel {
    --flyer-carousel-size: min(18rem, calc(100vw - 5.5rem));
  }

  .flyer-carousel__nav--prev {
    left: -0.15rem;
  }

  .flyer-carousel__nav--next {
    right: -0.15rem;
  }
}