.IconMosaic {
    --gap: 0;
    --iconSize: clamp(30px, 10vw, 70px);
    --bgColor: var(--color-background);

    &.dark {
        --bgColor: transparent;
    }

    position: relative;
    margin: 0 auto;

    width: min-content;

    &.small {
        --iconSize: clamp(30px, 10vw, 60px);
    }

    > div {
        width: max-content;
        margin: 0 auto;

        display: grid;
        grid-template-columns: repeat(var(--columns), var(--iconSize));
        grid-auto-rows: var(--iconSize);
        gap: var(--gap);

        > .Icon {
            z-index: 1;
            &.hollow,
            &:not(.filled) {
                --fgColor: var(--color-base-faintest);
            }
        }

        > a.Icon {
            z-index: 2;

            &:hover {
                transform: scale(0.98);
                filter: brightness(1.1);
            }
        }
    }

    &.gap {
        --gap: 1vw;
    }

    &.perspective {
        perspective: 3000px;
        perspective-origin: 50% 50%;

        > div {
            transform: rotateX(15deg) rotateY(-13deg);
        }
    }

    &:before {
        position: absolute;
        content: '';
        inset: calc(var(--iconSize) * -1);
        background: var(--bgColor);
        filter: blur(10px);
    }
}