/*main slider css*/
#carouselMain {
    width: 100%;
    overflow: visible;
    background: var(--background_color);
}

#carouselMain .carousel-inner {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#carouselMain .carousel-item {
    position: relative;
    width: 100%;
}

/* Mobile styles */
@media screen and (max-width: 768px) {
    #carouselMain {
        margin-bottom: 10px;
    }

    #carouselMain .carousel-indicators {
        display: flex;
    }

    #carouselMain .carousel-item {
        height: 250px;
    }

    #carouselMain .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* Desktop styles - let main_page_slider.php handle these */
@media screen and (min-width: 769px) {
    /* Styles are in main_page_slider.php component */
}