/* Updated CSS to target the carousel based on the provided HTML structure */

:root {
    --top-bar-height-desktop: 40px; /* Height of top bar on desktop */
    --top-bar-height-mobile: 30px;  /* Height of top bar on mobile */
}

.carousel.slide {
    width: 90% !important;
    max-width: 1800px !important;
    margin-left: auto !important; /* Centers the carousel horizontally */
    margin-right: auto !important; /* Centers the carousel horizontally */
    overflow: hidden !important;
    margin-top: var(--top-bar-height-desktop);
    max-height: 500px;               /* prevent overly tall carousel */
}

.carousel-item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .carousel.slide {
        margin-top: var(--top-bar-height-mobile);
        max-height: 300px;
    }

    .carousel-item img {
        max-height: 300px;
    }
}