.slider {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 20px auto;
            overflow: hidden;
            height:203px;
        }
        .slides {
            position: relative;
            width: 100%;
        }
        .slide {
            position: absolute;
            width: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .slide.active {
            opacity: 1;
        }

.slide {
    object-fit: contain;
    border-radius: 10px;
}
/* Responsive Slider Heights */
        @media (min-width: 991px) {
            .slider { height: 233.33px; }
        }
        @media (min-width: 768px) and (max-width: 990px) {
            .slider { height: 203px; }
        }
        @media (max-width: 767px) {
            .slider { height: 150.5px; }
        }
        @media (max-width: 379px) {
            .slider { height: 103.83px; }
        }