:root {
            --slide-width: 150px; /* Larghezza di ogni immagine */
            --gap: 20px;          /* Spazio tra le immagini */
            --duration: 18s;      /* Velocità: più è alto, più è lento */
        }

        .slider-container {
            width: 100%;
            overflow: hidden;
            background: #fff;
            padding: 20px 0;
            white-space: nowrap;
            position: relative;
        }

        /* Gradiente ai lati per effetto sfumato (opzionale) */
        .slider-container::before, .slider-container::after {
            content: "";
            position: absolute;
            top: 0; width: 100px; height: 100%;
            z-index: 2;
        }
        .slider-container::before { left: 0; background: linear-gradient(to right, white, transparent); }
        .slider-container::after { right: 0; background: linear-gradient(to left, white, transparent); }

        .slider-track {
            display: flex;
            width: max-content;
            animation: scroll var(--duration) linear infinite;
        }

        .slide {
            width: var(--slide-width);
            margin-right: var(--gap);
            flex-shrink: 0;
        }

        .slide img {
            width: 100%;
            height: 90px;
            object-fit: cover;
            border-radius: 8px;
        }

        /* Animazione CSS */
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-1 * (var(--slide-width) + var(--gap)) * var(--total-items))); }
        }

        /* Ferma l'animazione al passaggio del mouse */
        .slider-track:hover {
            animation-play-state: paused;
        }