.grid {
    --grid-alignment-x: initial;
    --grid-alignment-y: initial;

    --points: inital;

    --spacing-x: 0;
    --spacing-y: 0;

    @apply grid gap-x-[var(--spacing-x)] gap-y-[var(--spacing-y)] grid-flow-row-dense;

    align-items: var(--grid-alignment-y);
    justify-content: var(--grid-alignment-x);

    grid-template-columns: repeat(var(--points), 1fr);

    & > * {
        @apply m-0;
    }
}

.grid-item {
    --span-x: 1;
    --span-y: 1;

    @apply contents;

    & > * {
        grid-column: span var(--span-x) / span var(--span-x);
        grid-row: span var(--span-y) / span var(--span-y);
    }
}