.hero-section .f-carousel {
  --f-carousel-max-height: 33vh;
}

.hero-section .f-carousel img {
  object-fit: cover;
  object-position: center;
}

.f-carousel {
  --f-button-bg: #fff;
  --f-button-color: #000;
  --f-carousel-spacing: 1.5em;
  --f-carousel-border-radius: 0.5em;
}

.f-carousel.has-thumbs {
  --f-carousel-dots-height: 0;
}

.f-carousel.has-thumbs .f-carousel__dots {
  display: none;
}

.f-carousel .f-carousel__slide {
  border-radius: var(--f-carousel-border-radius);
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.f-carousel .f-carousel__slide img {
  margin: auto;
  width: 100%;
  height: auto;
  max-height: var(--f-carousel-max-height);
}

.f-carousel__track {
  align-items: center;
}

.f-progress {
  background-color: var(--f-progress-color);
}

.f-carousel__info {
  padding: 2em;
}

@media (min-width: 1024px) {
  .f-carousel__info {
    max-width: 25em;
    min-width: 20em;
    position: absolute;
    right: 3em;
    bottom: 3em;
    z-index: 10;

    background: rgba(var(--f-info-bg-rgba));
    color: var(--f-info-color);

  }
}


@media (min-width: 768px) {
  .f-carousel[data-slides="2"] .f-carousel__slide {
    width: calc(100% / 2 - var(--f-carousel-spacing));
  }

  .f-carousel[data-slides="3"] .f-carousel__slide {
    width: calc(100% / 3 - var(--f-carousel-spacing));
  }

  .f-carousel .f-carousel__slide[data-slides="4"] {
    width: calc(100% / 4 - var(--f-carousel-spacing));
  }

  .f-carousel .f-carousel__slide[data-slides="5"] {
    width: calc(100% / 5 - var(--f-carousel-spacing));
  }
}