.en-logo-wall { 
    /* max-width: 1440px; */
    margin: 80px auto 80px;
}

.en-logo-wall__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.en-logo-wall__description {
    margin-top: 8px;
    color: #7f8694;
    max-width: 960px;
}

.en-logo-wall__rows {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.en-logo-wall__row {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.en-logo-wall__viewport {
    position: relative;
    overflow: hidden;
}

.en-logo-wall__marquee {
    --logo-gap: 32px;
    display: flex;
    align-items: center;
    gap: var(--logo-gap);
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    animation-name: enLogoWallMarquee;
    animation-duration: var(--logo-duration, 32s);
    animation-timing-function: linear;
    animation-delay: var(--logo-delay, 0s);
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.en-logo-wall__row:hover .en-logo-wall__marquee {
    animation-play-state: paused;
}

.en-logo-wall__row:before,
.en-logo-wall__row:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(20px, 4.2vw, 72px);
    z-index: 2;
    pointer-events: none;
}

.en-logo-wall__row:before {
    left: 0;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.en-logo-wall__row:after {
    right: 0;
    background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.en-logo-wall__group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--logo-gap);
}

.en-logo-wall__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.en-logo-wall__item img {
    display: block;
    width: auto;
    height: 64px;
    opacity: 0.7;
    mix-blend-mode: multiply;
}

@keyframes enLogoWallMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-50% - (var(--logo-gap) / 2)), 0, 0);
    }
}

@media (max-width: 1023px) {
    .en-logo-wall {
        width: calc(100% - 32px);
        margin: 0 auto 64px;
        padding-top: 64px;
    }

    .en-logo-wall__rows {
        gap: 16px;
    }

    .en-logo-wall__marquee {
        --logo-gap: 24px;
    }
}

@media (max-width: 799px) {
    .en-logo-wall {
        width: calc(100% - 32px);
        margin: 0 auto 48px;
        padding-top: 0px;
    }

    .en-logo-wall__rows {
        margin-top: 24px;
        gap: 12px;
    }

    .en-logo-wall__item img {
        height: 56px;
    }
}
