@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-2145px);
    }
}

.slider {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 1480px;
}

    .slider::before, .slider::after {
        background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        height: 100px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .slider::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider::before {
        left: 0;
        top: 0;
    }

    .slider .slide-track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 20s linear infinite;
        display: flex;
        width: 2500px;
    }

    .slider .slide {
        margin-left: 30px;
        margin-right: 30px;
    }
    .slide:nth-child(1) {
        margin-left: 60px;
    }


/* ============================================
   MEDIA QUERIES FOR RESPONSIVENESS
   ============================================ */

/* mobile */
@media screen and (max-width: 680px) {

    @keyframes scroll-xxs {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-2145px);
        }
    }

    .slider {
        width: 400px;
    }

        .slider .slide-track {
            -webkit-animation: scroll-xxs 40s linear infinite;
            animation: scroll-xxs 20s linear infinite;
        }

        .slider::before,
        .slider::after {
        }

        .slider .slide {
        }

            .slider .slide img {
            }
}


/* Large Tablets and Small Desktops */
@media screen and (max-width: 860px) and (min-width: 681px) {

    @keyframes scroll-xxs {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-2145px);
        }
    }

    .slider {
        width: 90%;
    }

        .slider .slide-track {
            -webkit-animation: scroll-xxs 40s linear infinite;
            animation: scroll-xxs 20s linear infinite;
        }

        .slider::before,
        .slider::after {
        }

        .slider .slide {
        }

            .slider .slide img {
            }
}


@media screen and (min-width: 860px) {

    @keyframes scroll-xxs {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-2145px);
        }
    }

    .slider {
        width: 90%;
    }

        .slider .slide-track {
            -webkit-animation: scroll-xxs 40s linear infinite;
            animation: scroll-xxs 20s linear infinite;
        }

        .slider::before,
        .slider::after {
        }

        .slider .slide {
        }

            .slider .slide img {
            }
}