@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
        width: 100%!important;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
    justify-content: center;
}

.imagePreview1 {
    width: 33%;
    align-self: start;
    max-height: 250px;
    height: 50%;
}
.imagePreview2 {
    width: 33%;
    align-self: end;
    margin-left: -33%;
    max-height: 250px;
    height: 50%;
}
.carousel-item.active .mainImage:first-child {
    width: 66%;
}

.carousel {
	max-height: 500px;
	overflow: hidden;
}



.img-carousel {
	width: 100%;
	max-height: 500px;
	object-fit: cover;
	object-position: 50% 50%;
	
}

.imagePreview1 .img-carousel,
.imagePreview2 .img-carousel {
    max-height: 250px;
}

.carousel-inner{
	width:100%!important;
	margin-left: 0 !important
	max-height: 500px;
}

.carousel-item {
    max-height: 500px;
}