:root {
    --marquee-height: 60px;
    --marquee-gap: 25px;
    --marquee-duration: 70s;
}

.logo-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.logo-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: var(--marquee-gap);
    animation: logo-marquee-scroll var(--marquee-duration) linear infinite;
}

.logo-marquee:hover .logo-marquee__track {
    animation-play-state: paused;
}

.logo-marquee__group {
    display: flex;
    align-items: center;
    gap: var(--marquee-gap);
}

.logo-marquee__logo {
    height: var(--marquee-height);
    width: auto;
    flex-shrink: 0;
}

@keyframes logo-marquee-scroll {
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    :root {
        --marquee-height: 48px;
        --marquee-gap: 20px;
        --marquee-duration: 60s;
    }
}