.npd-logo-carousel,
.bg-nd-gray {
    background-color: #EEF0FF;
}


.slider {
    width: 100%;
    height: var(--height);
    overflow: hidden;

    mask-image: linear-gradient(to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%);
}

.slider .list {
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
}


/* LEFT animation (slower) */
.slider .list .item {
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    animation: autoRun 100s linear infinite;
    animation-delay: calc((100s / var(--quantity)) * (var(--position) - 1) * -1) !important;
}

/* RIGHT animation (slower) */
.slider.reverse .list .item {
    animation: autoRunReverse 100s linear infinite;
    animation-delay: calc((100s / var(--quantity)) * (var(--position) - 1) * -1) !important;
;
}
/* LEFT animation (default) */
@keyframes autoRun {
    from { left: 100%; }
    to   { left: calc(var(--width) * -1); }
}


.slider.reverse .list .item {
    animation: autoRunReverse 40s linear infinite;
    animation-delay: calc((40s / var(--quantity)) * (var(--position) - 1) * -1) !important;
}

/* RIGHT animation */
@keyframes autoRunReverse {
    from { left: calc(var(--width) * -1); }
    to   { left: 100%; }
}

/*.slider:hover .item {*/
/*    animation-play-state: paused !important;*/
/*    filter: grayscale(1);*/
/*}*/

/*.slider .item:hover {*/
/*    filter: grayscale(0);*/
/*}*/