.marqueen{
    height: clamp(0px, 5.56vw, 23px);
    /* position: relative; */
    z-index: 3;
    display: flex;
    align-items: center;
    flex-direction: row;
    background-color: var(--marqueen-bg-color);
    background-image: var(--marqueen-bg-img);
    background-size: 100% 100% ;
    /* background-size: cover; */
    background-position: center;
    box-sizing: border-box;
    box-shadow: 0 0 clamp(0px, 3vw, 12.42px) clamp(0px, 0.2vw, 0.828px) var(--marqueen-box-shadow);
    position: fixed;
    top: clamp(0px, 14vw, 57.69px);
    left: 0;
    width: 100%;
}

.marqueen .marquee-div{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    mask-image: linear-gradient(
        var(--mask-direction, to right),
        hsl(0 0% 0% / 0),
        hsl(0 0% 0% / 1) 20%,
        hsl(0 0% 0% / 1) 80%,
        hsl(0 0% 0% / 0)
    );
}

.marqueen .marquee{
    align-self: center;
    animation: marquee 10s linear infinite;
    display: inline-block;
}

@keyframes marquee {
    0% {
    transform: translateX(100vw);
    }
    100% {
    transform: translateX(-100vw);
    }
}

.maq-spacing{
    height: clamp(0px, 5.56vw, 23px);
    width: 100%;
}