// CLI Version 1.0.2
// Component Version 1.0.0
.thumbs-wrapper {
  margin: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.carouselContainer {
  height: unset;
  width: 100%;
  max-width: unset;
  margin: 0 auto;
}

.carouselItem {
  position: relative;
  height: 380px;
  &__image {
    height: 100%;
    width: auto;
    object-fit: contain;
  }
}

.legend {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.carousel .slide .legend {
  background: unset;
}

.carousel .control-arrow,
.carousel.carousel-slider .control-arrow {
  opacity: 1 !important;
}

#carouselImage {
  width: auto;
}
// ========================================
// Media Queries
// ========================================
// Adjusting grid for desktop screens to have 3 items per row
@media (min-width: 1024px) {
}
// Adjusting grid for tablet screens (between small tablets and desktops)
@media (max-width: 1023px) {
}
// Adjusting grid for smaller screens (small tablets and mobiles)
@media (max-width: 768px) {
  .carouselContainer {
    height: unset;
  }
}
// Adjusting grid for smaller screens (mobiles)
@media (max-width: 480px) {
  .carouselContainer {
    height: unset;
  }
}