/* ~~~~~~~~~~~~~~~~~~~*/
/* Global layout data */




.flex__column[row-height="1"] {
	--column-percent: 1;
}
.flex__column[row-height="2"] {
	--column-percent: 2;
}
.flex__column[row-height="3"] {
	--column-percent: 3;
}
.flex__column[row-height="4"] {
	--column-percent: 4;
}
.flex__column[row-height="5"] {
	--column-percent: 5;
}
.flex__column[row-height="6"] {
	--column-percent: 6;
}
.flex__column[row-height="7"] {
	--column-percent: 7;
}


.flex__row > * {
	width: calc(100% / var(--column-percent));
}
.flex__row[col-width="1"] {
	--column-percent: 1;
}
.flex__row[col-width="2"] {
	--column-percent: 2;
}
.flex__row[col-width="3"] {
	--column-percent: 3;
}
.flex__row[col-width="4"] {
	--column-percent: 4;
}
.flex__row[col-width="5"] {
	--column-percent: 5;
}
.flex__row[col-width="6"] {
	--column-percent: 6;
}
.flex__row[col-width="7"] {
	--column-percent: 7;
}
.list-item[col-width="8"] {
	--column-percent: 8;
}


/*.grid__column {
	grid-template-rows: repeat(var(--row-count), 1fr);
	grid-template-columns: repeat(var(--column-count), 1fr);
} */
.grid__column[data-rows="1"] {
	--row-count: 1;
}
.grid__column[data-rows="2"] {
	--row-count: 2;
}
.grid__column[data-rows="3"] {
	--row-count: 3;
}
.grid__column[data-rows="4"] {
	--row-count: 4;
}
.grid__column[data-rows="5"] {
	--row-count: 5;
}
.grid__column[data-rows="6"] {
	--row-count: 6;
}
.grid__column[data-rows="7"] {
	--row-count: 7;
}
.grid__column[data-rows="8"] {
	--row-count: 8;
}
.grid__column[data-rows="9"] {
	--row-count: 9;
}
.grid__column[data-rows="10"] {
	--row-count: 10;
}
.grid__column[data-rows="11"] {
	--row-count: 11;
}
.grid__column[data-rows="12"] {
	--row-count: 12;
}
.grid__column[data-rows="31"] {
	--row-count: 31;
}

.grid__column[data-columns="1"] {
	--column-count: 1;
}
.grid__column[data-columns="2"] {
	--column-count: 2;
}
.grid__column[data-columns="3"] {
	--column-count: 3;
}
.grid__column[data-columns="4"] {
	--column-count: 4;
}
.grid__column[data-columns="5"] {
	--column-count: 5;
}
.grid__column[data-columns="6"] {
	--column-count: 6;
}
.grid__column[data-columns="7"] {
	--column-count: 7;
}

/* */
.grid__row {
	grid-template-columns: repeat(var(--column-count), 1fr);
	grid-template-rows: repeat(var(--row-count), 1fr);
}
.grid__row[data-rows="1"] {
	----row-count: 1;
}
.grid__row[data-rows="2"] {
	--row-count: 2;
}
.grid__row[data-rows="3"] {
	--row-count: 3;
}
.grid__row[data-rows="4"] {
	--row-count: 4;
}
.grid__row[data-rows="5"] {
	--row-count: 5;
}
.grid__row[data-rows="6"] {
	--row-count: 6;
}
.grid__row[data-rows="7"] {
	--row-count: 7;
}

.grid__row[data-rows="31"] {
	--row-count: 31;
}
.grid__row[data-rows="32"] {
	--row-count: 32;
}

.grid__row[data-columns="1"] {
	--column-count: 1;
}
.grid__row[data-columns="2"] {
	--column-count: 2;
}
.grid__row[data-columns="3"] {
	--column-count: 3;
}
.grid__row[data-columns="4"] {
	--column-count: 4;
}
.grid__row[data-columns="5"] {
	--column-count: 5;
}
.grid__row[data-columns="6"] {
	--column-count: 6;
}
.grid__row[data-columns="7"] {
	--column-count: 7;
}

.grid__row[data-columns="31"] {
	--column-count: 31;
}
.grid__row[data-columns="32"] {
	--column-count: 32;
}

.grid__1-1-3 {
	grid-template-rows: 1fr, 1fr, 3fr;
}
.grid__1-1-4 {
	grid-template-columns: 1fr, 1fr, 4fr;
}
.grid__1-1-5 {
	grid-template-columns: 1fr, 1fr, 5fr;
}
.grid__1-1-6 {
	grid-template-columns: 1fr, 1fr, 6fr;
}


.grid-item-2,
.grid-item-3,
.grid-item-4,
.grid-item-5,
.grid-item-6,
.grid-item-7,
.grid-item-8,
.grid-item-9 {
	padding: 0.2em;
}

.grid-item-2:nth-child(2n + 1) {
	grid-column: 1;
}
.grid-item-3:nth-child(3n + 1) {
	grid-column: 1;
}
.grid-item-3:nth-child(3n + 2) {
	grid-column: 2;
}
.grid-item-3:nth-child(3n + 3) {
	grid-column: 3;
}

.grid-item-4:nth-child(4n + 1) {
	grid-column: 1;
}
.grid-item-4:nth-child(4n + 2) {
	grid-column: 2;
}
.grid-item-4:nth-child(4n + 3) {
	grid-column: 3;
}
.grid-item-4:nth-child(4n + 4) {
	grid-column: 4;
}

.grid-item-5:nth-child(5n + 1) {
	grid-column: 1;
}
.grid-item-5:nth-child(5n + 2) {
	grid-column: 2;
}
.grid-item-5:nth-child(5n + 3) {
	grid-column: 3;
}
.grid-item-5:nth-child(5n + 4) {
	grid-column: 4;
}
.grid-item-5:nth-child(5n + 5) {
	grid-column: 5;
}


.grid-item-6:nth-child(6n + 1) {
	grid-column: 1;
}
.grid-item-6:nth-child(6n + 2) {
	grid-column: 2;
}
.grid-item-6:nth-child(6n + 3) {
	grid-column: 3;
}
.grid-item-6:nth-child(6n + 4) {
	grid-column: 4;
}
.grid-item-6:nth-child(6n + 5) {
	grid-column: 5;
}
.grid-item-6:nth-child(6n + 6) {
	grid-column: 6;
}


.grid-item-7:nth-child(7n + 1) {
	grid-column: 1;
}
.grid-item-7:nth-child(7n + 2) {
	grid-column: 2;
}
.grid-item-7:nth-child(7n + 3) {
	grid-column: 3;
}
.grid-item-7:nth-child(7n + 4) {
	grid-column: 4;
}
.grid-item-7:nth-child(7n + 5) {
	grid-column: 5;
}
.grid-item-7:nth-child(7n + 6) {
	grid-column: 6;
}
.grid-item-7:nth-child(7n + 7) {
	grid-column: 7;
}

.grid-item-8:nth-child(8n + 1) {
	grid-column: 1;
}
.grid-item-8:nth-child(8n + 2) {
	grid-column: 2;
}
.grid-item-8:nth-child(8n + 3) {
	grid-column: 3;
}
.grid-item-8:nth-child(8n + 4) {
	grid-column: 4;
}
.grid-item-8:nth-child(8n + 5) {
	grid-column: 5;
}
.grid-item-8:nth-child(8n + 6) {
	grid-column: 6;
}
.grid-item-8:nth-child(8n + 7) {
	grid-column: 7;
}
.grid-item-8:nth-child(8n + 8) {
	grid-column: 8;
}

.grid-item-9:nth-child(9n + 1) {
	grid-column: 1;
}
.grid-item-9:nth-child(9n + 2) {
	grid-column: 2;
}
.grid-item-9:nth-child(9n + 3) {
	grid-column: 3;
}
.grid-item-9:nth-child(9n + 4) {
	grid-column: 4;
}
.grid-item-9:nth-child(9n + 5) {
	grid-column: 5;
}
.grid-item-9:nth-child(9n + 6) {
	grid-column: 6;
}
.grid-item-9:nth-child(9n + 7) {
	grid-column: 7;
}
.grid-item-9:nth-child(9n + 9) {
	grid-column: 9;
}
.grid-item-9:nth-child(9n + 9) {
	grid-column: 9;
}

Make a variable for gap 

.gap__R-10 {
	margin:0 -10px 0 0;
}
.gap__R-5 {
	margin:0 -5px 0 0;
}
.gap__R0 {
	margin: 0;
}
.gap__R10 {
	margin:0 10px 0 0;
}
.gap__R20 {
	margin:0 20px 0 0;
}
.gap__R30 {
	margin:0 30px 0 0;
}
.gap__L-10 {
	margin:0 0 0 -10px;
}
.gap__L-5 {
	margin:0 0 0 -5px;
}
.gap__L0 {
	margin: 0;
}
.gap__L10 {
	margin:0 0 0 10px;
}
.gap__L20 {
	margin:0 0 0 20px;
}
.gap__L30 {
	margin:0 0 0 30px;
}
.gap__L40 {
	margin:0 0 0 40px;
}
.gap__L50 {
	margin:0 0 0 50px;
}
.gap__L60 {
	margin:0 0 0 60px;
}