.logo-marquee {
    overflow: hidden;
    position: relative;

    &:before {
        content: '';
        width: 100%;
        height: 2px;
        background: var(--gradient-white);
        position: absolute;
        top: var(--spacing-xl);
        left: 0;

        @media screen and (max-width: 991px) {
            top: var(--spacing-lg);
        }
        @media screen and (max-width: 768px) {
            top: var(--spacing-md);
        }
    }
    &:after {
        content: '';
        width: 100%;
        height: 2px;
        background: var(--gradient-white);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .marquee-slider {
        width: 100%;
        overflow: hidden;
        padding: 50px 0;

        @media screen and (max-width: 768px) {
            padding: 40px 0;
        }
        &.pure-marquee {
            display: flex;
            width: fit-content;
            animation: pure-marquee-scroll 120s linear infinite;
        }
        .slide {
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            .logo {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 50px;
                white-space: nowrap;

                @media screen and (max-width: 768px) {
                    padding: 0 35px;
                }
                @media screen and (max-width: 576px) {
                    padding: 0 20px;
                }

                img {
                    max-height: 80px;
                    width: auto;
                    height: auto;
                    object-fit: contain;

                    @media screen and (max-width: 768px) {
                        max-height: 60px;
                    }
                    @media screen and (max-width: 576px) {
                        max-height: 50px;
                    }
                }
            }
        }
    }
}
.logo-marquee, .logo-marquee * {
    -webkit-overflow-scrolling: touch;
}
@keyframes pure-marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}