@layer components {
    .colors {
        /**display: flex;/**/
        margin-inline: auto;
        /*width: max-content;*/
        width: 100%;
        max-width: 100%;
        /*flex-direction: column;*/
        flex-wrap: wrap;

        >* {
            /* min-width: 12rem; */
            min-height: 1.5rem;
            display: block;
            width: 9rem;
            aspect-ratio: 1;
            /*margin: 1rem;*/
            position: relative;
            width: auto;
            aspect-ratio: unset;

            /* vivids */
            &:nth-last-child(1) {
                /* outline: solid 1px red; */
                color: var(--surface-base);
            }

            &>* {
                display: grid;
                align-items: center;
                margin: 0;
                padding: 1em 5px;
                z-index: 2;
                font-size: 0.9rem;
                line-height: 1.75;
            }
        }

        /* &:nth-last-of-type(2) > * > * { */
        /* color: var(--text-base); */
        /* ::marker { color: var(--text-base); } */
        /*outline: solid 1px red;*/
        /* } */

        /* &:nth-last-of-type(1)  > * > * {
        color: var(--text-base);
        outline: solid 1px red;
    } */


        & .base {
            color: #fff;
        }

        &.text>* {
            color: var(--surface-base);
        }

        &.surface>* {
            color: var(--text-base);
        }
    }
}