.hero-layout3 {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}

#heroCarousel {
width: 100%;
}
.carousel-inner {
width: 100%;
}

.carousel-item {
width: 100%;
}

.carousel-item img {
width: 100%;
/*height: 100vh;*/
object-fit: contain;
object-position: center;
}

.carousel-fade .carousel-item {
opacity: 0;
transition: opacity 1s ease-in-out;
}

.carousel-fade .carousel-item.active {
opacity: 1;
}

@media (max-width: 768px) {
.carousel-item img {
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  background-color: #e8f5e9;
}
}

@media (max-width: 480px) {
.carousel-item img {
  height: auto;
  max-height: 50vh;
  object-fit: contain;
  background-color: #e8f5e9;
}
}