@import "instance";

.main_container {
    padding-block-start: 0px;
}

.container_header {
    @include position;
    padding-block-start: 25px;
    z-index: 2;

    .brand_strip {
        z-index: 3;
    }

    .bg_main_jersey {
        @include position(absolute, 200px);
        @include flex-direction(column);
        @include user-select;
        @include wh(100vw);
        @include gap(clamp(10px, 3.91vw, 75px));
        @include flex;
        padding-top: 5px;
        overflow: hidden;
        z-index: 1;

        @include brp($b7) {
            @include transform(translateY(-50%));
            @include gap(min(8.59vw, 66px));
            top: 50%;
        }

        .marquee_1 {
            @include marquee((
                display: inline-flex,
                duration: 25s,
                anim: marquee_2,
                grid: false,
                gap: 8vw,
                width_marquee: 200vw
            ));

            .marquee_content {
                padding-inline: 0;

                .country {
                    @include brp($b7) {
                        font-size: min(5.20vw, 40px);
                    }
                }
            }
        }

        .marquee_2 {
            @include marquee((
                display: inline-flex,
                duration: 25s,
                grid: false,
                gap: 8vw,
                width_marquee: 200vw
            ));

            .marquee_content {
                padding-inline: 0;

                .wc {
                    @include brp($b7) {
                        font-size: min(2.47vw, 19px);
                    }
                }
            }
        }
    }
}