.marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%
}

.marquee-content {
    display: flex;
    flex-shrink: 0;
    white-space: nowrap
}

@layer properties {
    @supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        ::backdrop,
        :after,
        :before {
            --tw-space-x-reverse: 0
        }
    }
}

:where(.marquee>:not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-end: calc(var(--spacing, .25rem)*4*(1 - var(--tw-space-x-reverse)));
    margin-inline-start: calc(var(--spacing, .25rem)*4*var(--tw-space-x-reverse))
}

@property --tw-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}