.fgmTiles {
    --fgmTilesGap:     8;
    --fgmTilesColumns: 5;
    --fgmTilesRows:    5;
    --fgmTileSize:    64;

    display: grid;
    gap: calc(var(--fgmTilesGap) * 1px);
    grid-template-columns: repeat(var(--fgmTilesColumns),  1fr);
    grid-template-rows:    repeat(var(--fgmTilesRows),     1fr);
    width: calc((var(--fgmTileSize) * var(--fgmTilesColumns) + (var(--fgmTilesGap) * (var(--fgmTilesColumns) - 1))) * 1px);
    max-width: 100%;
}

.fgmTileItem {
    position: relative;
    display: block;
    cursor: pointer;
    perspective: 500px;
}

.fgmCube {
    transform-style: preserve-3d;
    transition: 0.5s;
}

.fgmCubeFace {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    backface-visibility: hidden;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
}

.fgmTileItem:is(:hover, :active, .sel) .fgmCubeFace { box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2); }

.faceFront  { transform: rotateY(  0deg); }
.faceBack   { transform: rotateY(180deg); }

.fgmTileItem.sel .fgmCube { transform: rotateY(-180deg); }