.sp-loop{
    margin:10px 0;
}

/* 🔥 VARIABLE JARAK */
:root{
    --sp-gap: 80px;
}

/* wrapper */
.sp-loop-wrap{
    overflow:hidden;
    position:relative;
}

/* fade */
.sp-loop-wrap::before,
.sp-loop-wrap::after{
    content:'';
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.sp-loop-wrap::before{
    left:0;
    background:linear-gradient(to right, #fff 30%, transparent);
}

.sp-loop-wrap::after{
    right:0;
    background:linear-gradient(to left, #fff 30%, transparent);
}

/* track */
.sp-loop-track{
    display:flex;
    width:max-content;
    animation:spLoop 30s linear infinite;
}

/* item */
.sp-loop-item{
    flex:0 0 auto;
    margin-right:var(--sp-gap);
}

/* logo */
.sp-loop-item img{
    height:85px;
    object-fit:contain;

    filter:grayscale(100%);
    opacity:.6;
    transition:.3s;
}

.sp-loop-item img:hover{
    filter:none;
    opacity:1;
    transform:scale(1.1);
}

/* 🔥 LOOP */
@keyframes spLoop{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-33.333%);
    }
}

/* hover stop */
.sp-loop-wrap:hover .sp-loop-track{
    animation-play-state:paused;
}

/* mobile */
@media(max-width:768px){
    :root{
        --sp-gap: 50px;
    }

    .sp-loop-track{
        animation-duration:20s;
    }

    .sp-loop-item img{
        height:60px;
    }
}

/* desktop */
@media(min-width:1024px){
    :root{
        --sp-gap: 140px; /* 🔥 ubah jarak di sini */
    }

    .sp-loop-track{
        animation-duration:40s;
    }
}