.carousel {
    --items: 41;
    --carousel-duration: calc(var(--items) * 2s);
    --carousel-item-width: 200px;
    --carousel-item-height: 170px;
    --carousel-item-gap: 2rem;
    
    position: relative;
    width: 100%;          /* ocupa todo el ancho disponible */
    height: auto;
    max-width: 1200px;    /* opcional: limita el ancho máximo */
    margin: 0 auto;       /* centra el carrusel */
    padding: 0 2rem;      /* separación lateral */
    overflow: hidden;
    display: flex;
    gap: var(--carousel-item-gap); /* espacio entre cada tarjeta */
    text-align: center;
    align-items: center;
}


.carousel img {
    width: 100%;
    height: 75%;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    display: block;
}


.carousel > article {
    flex: 0 0 var(--carousel-item-width); /* ancho fijo */
    height: auto; /* altura según contenido */
    background: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    height: auto;
    animation: marquee var(--carousel-duration) linear infinite;
}


.carousel > article:nth-child(1) { --i: 0; }
.carousel > article:nth-child(2) { --i: 1; }
.carousel > article:nth-child(3) { --i: 2; }

@keyframes marquee {
  100% {
      transform: translateX(calc((var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) * -1));
  }
}