.marquee-wrapper {
    background-color: $white-color;
    .marquee {
        position: relative;
        --duration: 120s;
        --gap: 0px;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        user-select: none;
        gap: var(--gap);

        &:first-child {
            --duration: 100s;
        }

        &:last-child {
            --duration: 80s;
        }

        &.marquee--reverse {
            .marquee-group {
                animation-direction: reverse;
            }
        }

        .marquee-group {
            -ms-flex-negative: 0;
            flex-shrink: 0;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: distribute;
            justify-content: space-around; 
            gap: var(--gap);
            min-width: 100%;
            animation: scroll var(--duration) linear infinite;

            .text {
                font-family: $title-font;  
                font-weight: 600;
                font-size: 20px;
                line-height: 1.4;
                text-transform: uppercase;
                color: $title-color;

                img {
                    margin: 15px 20px 20px 20px;
                }
            }
        }
    }
}