.background-area {
    position: relative;
}

.grid {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    pointer-events: none;

    overflow: hidden;
}

.grid-row {
    position: absolute;

    left: 0;

    display: grid;
    grid-template-columns: repeat(30, var(--cell-size));

    width: 100%;
    height: var(--cell-size);
}

.grid .cell {
    width: var(--cell-size);
    height: var(--cell-size);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    transition: transform 180ms ease-out;
}

.grid .cell svg {
    width: 30%;
    height: 30%;
}

.grid .cube {
    transform-box: fill-box;
    transform-origin: center;

    animation: cubeRotate 6s linear infinite;
}

@keyframes cubeRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.grid .cell .cube {
    transform-box: fill-box;
    transform-origin: center;
    animation: cubeRotate 6s linear infinite;
}

.grid .cell .cube-push {
    transform: translate3d(0, 0, 0);
    transition: transform 180ms ease-out;
}

.grid .cell svg {
    width: 30%;
    height: 30%;
    display: block;
    user-select: none;
}