/* About section image carousel (inside .media-frame)
   Keeps the frame looking like your current single-image card, but rotates 5 images.
*/

.media-frame {
  /* gives the carousel a consistent "card" presence even if images have different sizes */
  min-height: 420px;
}

@media (max-width: 991.98px) {
  .media-frame {
    min-height: 320px;
  }
}

/* Make the carousel fill the frame */
.media-frame .carousel,
.media-frame .carousel-inner,
.media-frame .carousel-item {
  height: 100%;
}

/* Cover-fit the images so they crop nicely like the hero */
.media-frame .carousel-item img {
  height: 100%;
  object-fit: cover;
}

/* Keep controls readable on imagery */
.media-frame .carousel-control-prev,
.media-frame .carousel-control-next {
  width: 14%;
}

.media-frame .carousel-control-prev-icon,
.media-frame .carousel-control-next-icon {
  filter: invert(1);
}

/* Indicator dots: subtle, readable on photos */
.media-frame .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

/* Optional: ensure the badge always sits above carousel UI */
.media-frame .media-badge {
  z-index: 5;
}