/* carousel.css */

.responsive-carousel {
    display: flex;
    flex-wrap: wrap;
}

.carousel-item {
    flex: 1 1 100%;
    transition: all 0.3s ease-in-out;
}

@media (min-width: 768px) {
    .responsive-carousel {
        display: table;
        width: 100%;
    }

    .carousel-item {
        display: table-cell;
        vertical-align: top;
    }
}

@media (max-width: 767px) {
    .responsive-carousel {
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        display: flex;
    }

    .carousel-item {
        scroll-snap-align: start;
        flex: 0 0 100%;
        max-width: 100%;
        display: block;
    }

    .carousel-item.expanded .additional-info {
        display: block;
    }

    .carousel-item .additional-info {
        display: none;
    }
}