.scroll-carousel {
    height: 120px;
    position: relative;
    width: 100%;

    display: grid;
    place-items: center;
    overflow: hidden;
}
.scroll-carousel.big {
    height: 240px;
}
.scroll-carousel.withFade::before,
.scroll-carousel.withFade::after{
    position: absolute;
    background: #000000;
    filter: blur(50px);
    transform: matrix(-1, 0, 0, 1, 0, 0);
    content: '';
    height: 166%;
    width: 11%;
    z-index: 2;
    pointer-events: none;
    top: -83px;
}
.scroll-carousel::before{
    left: -105px;
}
.scroll-carousel::after{
    right: -105px;
    transform:rotateZ(180deg);
}

/*  IMPORTANT CODE BELOW */
.slide-track:hover {
    animation-play-state: paused!important;
}

.slide-track-reverse:hover {
    animation-play-state: paused!important;
}
.slide-track {
    width: calc(222px * 20);
    display: flex;
    animation: scroll 30s linear infinite;
    justify-content: space-between;
}

.slide-track-reverse {
    width: calc(222px * 20);
    display: flex;
    animation: scrollReverse 30s linear infinite;
    justify-content: space-between;
}
.big .slide-track {
    width: calc(391px * 20);
    animation: scrollBig 50s linear infinite;
}

.slide-item {
    width: 150px;
    height: 120px;
    margin-right: 102px;

    display: grid;
    place-items: center;
    transition:0.5s;
}
.big .slide-item {
    width: 346px!important;
    height: 240px!important;
    margin-right: 45px!important;
}
.slide-item:hover{
    /*transform:scale(0.8)*/
}

@keyframes scroll {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(calc(-222px * 10));
    }
}
@keyframes scrollReverse {
    0% {
        transform: translateX(calc(-222px * 10));
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes scrollBig {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(calc(-391px * 10));
    }
}