//
// Product Images Carousel
// ----------------------------
//

@import "../../global";

// Carousel container styling
.field--name-images {
  .f-carousel {
    height: 400px;
    margin-bottom: 1.5rem;
  }

  // Carousel slide styling
  .f-carousel__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    img {
      max-width: 100%;
      max-height: 100%;
      height: auto;
      object-fit: contain;
    }

    a[data-fancybox] {
      display: block;
      height: 100%;
    }
  }
}

// Responsive adjustments
@include media-breakpoint-down(md) {
  .field--name-images {
    .f-carousel {
      height: 300px;
    }
  }
}
