@media (min-width: 768px) {
    .carousel-item .small-screen {
        display: none !important;
    }

    .carousel-item .large-screen {
        display: block !important;
        object-fit: cover; /* Maintain aspect ratio and cover */
        height: 100%; /* Adjust based on your design */
        width: 100%;
    }
}

@media (max-width: 767px) {
    .carousel.slide {
        height: 100vh; /* Full viewport height */
        width: 100vw; /* Full viewport width */
        overflow: hidden; /* Prevent scrollbars */
    }

    .carousel-inner {
        height: 100%; /* Ensure the inner container takes up full height */
        width: 100%; /* Ensure the inner container takes up full width */
    }

    .carousel-item {
        height: 100vh; /* Full viewport height for each slide */
        width: 100vw; /* Full viewport width for each slide */
    }

    .carousel-item .large-screen {
        display: none !important;
    }

    .carousel-item .small-screen {
        display: block !important;
        object-fit:fill;  
    }
}