@keyframes moveBg {
    from {
        background-position: 0 50%;
    }
    to {
        background-position: -1134px 50%;
    }
}
@keyframes moveBgReverse {
    from {
        background-position: 0 50%;
    }
    to {
        background-position: 1134px 50%;
    }
}

.carousel {
    --blur: 6px;
    --contrast: 105%;
    --speed: 20s;
    height: 130px;
    width: 100%;
    position: relative;

/*.mask {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    background: #0000;*/
/*    !*backdrop-filter: blur(var(--blur)) contrast(var(--contrast));*!*/
/*    !*-webkit-backdrop-filter: blur(var(--blur)) contrast(var(--contrast)); !* so it works on Safari *!*!*/
/*    !*-webkit-mask: linear-gradient(90deg, #000 50px, #0000 175px calc(100% - 175px), #fff calc(100% - 50px));*!*/
/*    pointer-events: none;*/
/*}*/
}
.carousel .logos{
    height: 100px;
    animation: moveBg var(--speed) linear infinite;
    position: absolute;
    inset: 0;
    background: url(https://s3.cloudfly.vn/colorme/files/7dJB8xAOAU8rkYrC0NwEoln3L42qOyYLhep7dFoz.png);
    background-size: cover;
    background-repeat: repeat-x;
    -webkit-mask: linear-gradient(90deg, #0000 5px, #000 50px calc(100% - 50px), #0000 calc(100% - 5px));
}

    /*!* make the second carousel larger icons and more blur*!*/
.carousel:nth-of-type(2) .logos{
    animation: moveBgReverse var(--speed) linear infinite;
    /*--blur: 9px;*/
    /*--contrast: 125%;*/

/*.logos {*/
/*    !*background-image: url('https://s3.cloudfly.vn/colorme/files/HLbb8qT2eiqjX1ngHCfklR8vNywoktqVAfAa2YXv.png');*!*/
/*    !*background-repeat: repeat-x;*!*/
/*    !*background-size: cover;*!*/
/*}*/
}


@media (max-width: 768px) {
    .logos{
        height: 80px !important;
    }
}