.IconMosaic {
    --iconSize: 90px;

    position: relative;
    margin: 0 auto;

    &.small {
        --iconSize: 70px;
    }

    &:before {
        position: absolute;
        inset: 0;
        filter: blur(20px);
        border-radius: 300px;
        content: '';
        background: rgba(255, 255, 255, .7);
        z-index: 0;
    }

    > 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-fainter);
            }
        }

        > a.Icon {
            z-index: 2;

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

    &.gap {
        --gap: var(--base-gap);
    }

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

        > div {
            transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(15deg) rotateY(-13deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
        }
    }
}

@media all and (max-width: 800px) {
    .IconMosaic {
        --iconSize: 70px !important;
    }
}

@media all and (max-width: 600px) {
    .IconMosaic {
        --iconSize: 60px !important;
    }
}