.Tags {
    > .wrapper {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--base-gap);
        margin-bottom: -35px; /* Ensure the last line is never incomplete */
    }

    &.narrow {
        max-width: var(--content-width-narrow);
    }

    &.centered {
        margin-left: auto;
        margin-right: auto;
    }

    &.randomColors {
        > .wrapper > .Tag:nth-child(12n + 1)  { --bgColor: #1FE090; }
        > .wrapper > .Tag:nth-child(12n + 2)  { --bgColor: #22E18F; }
        > .wrapper > .Tag:nth-child(12n + 3)  { --bgColor: #1DDF93; }
        > .wrapper > .Tag:nth-child(12n + 4)  { --bgColor: #21DF92; }
        > .wrapper > .Tag:nth-child(12n + 5)  { --bgColor: #2AE18D; }
        > .wrapper > .Tag:nth-child(12n + 6)  { --bgColor: #31E588; }
        > .wrapper > .Tag:nth-child(12n + 7)  { --bgColor: #3DE784; }
        > .wrapper > .Tag:nth-child(12n + 8)  { --bgColor: #47EA80; }
        > .wrapper > .Tag:nth-child(12n + 9)  { --bgColor: #4EEC7C; }
        > .wrapper > .Tag:nth-child(12n + 10) { --bgColor: #59EE77; }
        > .wrapper > .Tag:nth-child(12n + 11) { --bgColor: #68F46F; }
        > .wrapper > .Tag:nth-child(12n + 12) { --bgColor: #7DF967; }
    }

    &.animated {
        position: relative;

        overflow: hidden;

        > .wrapper {
            justify-content: flex-start;
            width: 210%;
            animation: tagsAnimated 60s linear infinite alternate;
        }

        &:before {
            position: absolute;
            z-index: 1;
            content: '';
            top: 0;
            left: 0;
            bottom: 0;
            width: 30%;
            background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        }

        &:after {
            position: absolute;
            z-index: 1;
            content: '';
            top: 0;
            right: 0;
            bottom: 0;
            width: 30%;
            background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        }
    }
}

@keyframes tagsAnimated {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}