css
@media (min-width: 960px) {
    .carousel .carousel-item {
        height: clamp(400px, 36.5vw, 900px) !important;
    }
}

.carousel .carousel-item {
    height: 400px;
}

.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
    display: block;
}

.carousel-item {
    transition: transform .6s ease, -webkit-transform .6s ease;
}

.CarouselImage1,
.CarouselImage2,
.CarouselImage3,
.CarouselImage5,
.CarouselImage6,
.CarouselImage11,
.CarouselImage12,
.CarouselAdmImage {
    height: 770px;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.carousel-item {
    position: relative;
    display: none;
    align-items: center;
    width: 100%;
    backface-visibility: hidden;
    perspective: 1000px;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.CarouselImage8 {
    background-image: url('l.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#carousel-caption8 {
    background-color: rgba(0,0,0,0);
}

@media screen and (max-width: 350px) {
    .CarouselImage8 {
        background-image: url('s.webp') !important;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 600px) {
    .CarouselImage8 {
        background-image: url('m.webp');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

@media (min-width: 992px) {
    .CarouselImage8 {
        background-image: url('l.webp');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

@media (min-width: 1200px) {
    .CarouselImage8 {
        background-image: url('xl.webp');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

*, ::after, ::before {
    box-sizing: border-box;
}