.innerGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(120px, auto);
    grid-auto-flow: dense;
    gap: 16px;

    width: min(90vw, 1000px);
    margin: 15px auto 0;
    padding: 10px;
    box-sizing: border-box;

    transform: translateY(100vh);
    visibility: hidden;
    transition: transform 0.6s ease, visibility 0.6s;
    will-change: transform;
}

#innerGrid.move-up {
    transform: translateY(0);
    visibility: visible;
}

.innerGrid > .container {
    margin: 0;
    max-width: none;
}

.col-span-0 { grid-column: span 0.5; }
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }

.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }

/* Use inside a spanning cell to lay out smaller cells within it using the same column/row span classes. */
.nestedGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(60px, auto);
    gap: 8px;
}