.partners {
    padding-inline: 4rem;
    --fade: 12%; /* lebar area fade di tiap sisi */
}

.partners-inner {
    padding-block: 26px;
}

.partners-viewport {
    overflow: hidden;
    width: 75%; /* 3/4 halaman (desktop) */
    max-width: 100%;
    margin-inline: auto; /* tetap di tengah */

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

.partners-track {
    display: flex;
    width: max-content;
    animation: partners-scroll 72s linear infinite
}

.partners-group {
    display: flex;
    align-items: center;
    flex: none
}

.partners-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    flex: none;
    margin-inline: 32px
}

@keyframes partners-scroll {
    to {
        transform: translateX(-50%)
    }
}

.partners-viewport:hover .partners-track,
.partners-viewport:focus-within .partners-track {
    animation-play-state: paused
}

/* Laptop kecil / tablet landscape */
@media(max-width:1024px) {
    .partners {
        padding-inline: 2.5rem
    }

    .partners-viewport {
        width: 85%
    }
}

/* Tablet portrait */
@media(max-width:760px) {
    .partners {
        padding-inline: 1.5rem;
        --fade: 10%
    }

    .partners-inner {
        padding-block: 22px
    }

    .partners-viewport {
        width: 100%
    }

    .partners-logo {
        height: 44px;
        margin-inline: 24px
    }

    .partners-track {
        animation-duration: 30s
    }
}

/* HP */
@media(max-width:480px) {
    .partners {
        padding-inline: 1rem;
        --fade: 14%
    }

    .partners-logo {
        height: 40px;
        margin-inline: 20px
    }

    .partners-track {
        animation-duration: 26s
    }
}

@media(prefers-reduced-motion:reduce) {
    .partners-viewport {
        -webkit-mask-image: none;
        mask-image: none;
        width: 100%
    }

    .partners-track {
        animation: none;
        transform: none;
        width: auto;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center
    }

    .partners-group {
        flex-wrap: wrap;
        justify-content: center
    }

        .partners-group[aria-hidden="true"] {
            display: none
        }
}