.Tags {

    > .wrapper {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--base-gap);
    }

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

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

    &.randomColors {
        > .wrapper > .Tag:nth-child(12n + 1)  { --bgColor: #00b09b; }
        > .wrapper > .Tag:nth-child(12n + 2)  { --bgColor: #14b58f; }
        > .wrapper > .Tag:nth-child(12n + 3)  { --bgColor: #29ba84; }
        > .wrapper > .Tag:nth-child(12n + 4)  { --bgColor: #3ebf78; }
        > .wrapper > .Tag:nth-child(12n + 5)  { --bgColor: #54c46d; }
        > .wrapper > .Tag:nth-child(12n + 6)  { --bgColor: #6ac962; }
        > .wrapper > .Tag:nth-child(12n + 7)  { --bgColor: #7ecb57; }
        > .wrapper > .Tag:nth-child(12n + 8)  { --bgColor: #88ce4d; }
        > .wrapper > .Tag:nth-child(12n + 9)  { --bgColor: #91d042; }
        > .wrapper > .Tag:nth-child(12n + 10) { --bgColor: #97d337; }
        > .wrapper > .Tag:nth-child(12n + 11) { --bgColor: #98d432; }
        > .wrapper > .Tag:nth-child(12n + 12) { --bgColor: #96c93d; }
    }

    &.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%);
    }
}