.brand-logos {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.brand-wrapper {
    display: flex;
    overflow: hidden;
    background: var(--s-color);
    padding: 34px;
    border-radius: 32px;
    width: 100%;
    direction: ltr;
}

.brand-items {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 60px;
    padding-right: 60px;
    animation: scroll-loop 25s linear infinite;
}

.brand-wrapper:hover .brand-items {
    animation-play-state: paused;
}

@keyframes scroll-loop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}


@media (max-width: 400px) {
    .brand-wrapper {
        padding: 20px;
        border-radius: 24px;
    }

    .brand-items img {
        width: 40px;
        height: 40px;
    }
}