/* --- Slick Carousel Styling --- */

/* Positioning for slick dots */
.slick-dots {
  bottom: -35px;
}

/* --- Arrow Styling --- */

/* Base arrow icon size */
.slick-arrow::before {
  font-size: 1.8rem;
}

/* Arrow and active dot color and opacity */
.slick-arrow::before,
.slick-dots li.slick-active button:before {
  color: #be820e;
  opacity: 0.5;
}

/* Hover state for arrows */
.slick-arrow:hover::before {
  color: #be820e;
  opacity: 1;
}

/* --- Flex Settings for Slick Track and Slides --- */

.slick-track {
  display: flex !important;
}

.slick-slide {
  height: auto !important;
}

/* Ensures each slide fills its container */
.slick-slide > div {
  height: 100%;
}

/* --- Media Gallery Caption Styling --- */
.paragraph--type--media-gallery.paragraph--view-mode--media-gallery-carousel .slick-list .slick-slide .blazy__caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 40%);
  padding: 1rem;
  color: #FFF;
}