.carousel {
     background: #f0f0f0;
     max-width: 100%;
     margin: 0 auto;
 }

 .carousel-cell {
     padding: 5px;
     box-sizing: border-box;
 }

 /* Desktop: 4 por slide */
 @media (min-width: 1024px) {
     .carousel-cell {
         width: 25%;
     }
 }

 /* Tablet: 2 por slide */
 @media (min-width: 640px) and (max-width: 1023px) {
     .carousel-cell {
         width: 50%;
     }
 }

 /* Móvil: 1 por slide */
 @media (max-width: 639px) {
     .carousel-cell {
         width: 100%;
     }
 }

 .carousel-cell img {
     width: 100%;
     height: 200px;
     object-fit: cover;
     border-radius: 8px;
 }