@layer addon {

    .templateMarquee {
        display: flex;
        width: 100%;
        .marquee {
            width: 100%;
            align-items: center;
            height: auto;
            overflow: hidden;
            z-index: 9;

            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-stroke: 4px transparent;
            color: var(--color-light);

            font-family: var(--font-basic);
            line-height: 1;
            font-size: 8rem;
            font-weight: 900;
            
            display: flex;
            flex-direction: row;
            text-transform: uppercase;
            @media (max-width: 56em) {
                font-size: 5rem;
            }
            @media (--max-fablet) {
                font-size: 5rem;
            }
            ul {
                all: unset;
                li {
                    all: unset;
			        white-space: nowrap;
                }
            }
        }
    }
}