/*********************************************************************/
/* Bootstrap 4 Multiple Item Carousel */
/*********************************************************************/
/* medium - display 2  */
@media (min-width: 768px) {

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(50%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .carousel-inner .carousel-item>div {
        flex: 0 0 50%; /* Mostrar 2 productos por vista */
        max-width: 50%;
    }

    /* Si prefieres 3 productos por vista, usa estas proporciones:
    .carousel-inner .carousel-item>div {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
    */

    .carousel-inner {
        display: flex;
        overflow: hidden; /* Oculta las imágenes que están fuera del viewport */
    }

    .carousel-item {
        display: flex;
        flex: 0 0 100%; /* Ocupa todo el ancho del contenedor */
        justify-content: space-between; /* Asegura que los elementos se alineen correctamente */
    }

    .carousel-item.active {
        display: flex;
    }

    .carousel-item-next,
    .carousel-item-prev {
        position: relative;
        display: flex;
    }

    .carousel-item-next {
        transform: translateX(100%);
    }

    .carousel-item-prev {
        transform: translateX(-100%);
    }

    .carousel-item-right.active,
    .carousel-item-left.active {
        transform: translateX(0%);
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
    transform: translateX(0);
}