/* Grid styling */

/* Grid Gaps */
.gg0 .grid { gap: 0rem; }
.gg1 .grid { gap: 1rem; }
.gg2 .grid { gap: 2rem; }
.gg3 .grid { gap: 3rem; }
.gg4 .grid { gap: 4rem; }
.gg5 .grid { gap: 5rem; }
.gg6 .grid { gap: 6rem; }
.gg7 .grid { gap: 7rem; }
.gg8 .grid { gap: 8rem; }
.gg9 .grid { gap: 9rem; }
.gg10 .grid { gap: 10rem; }

/* Grids */
.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-7 { grid-template-columns: repeat(7, 1fr); }
.grid-8 { grid-template-columns: repeat(8, 1fr); }
.grid-9 { grid-template-columns: repeat(9, 1fr); }
.grid-10 { grid-template-columns: repeat(10, 1fr); }
.grid-11 { grid-template-columns: repeat(11, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

.grid-1-2 { grid-template-columns: 1fr 2fr; }
.grid-1-3 { grid-template-columns: 1fr 3fr; }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-3-1 { grid-template-columns: 3fr 1fr; }

/* Columns spans */
.col.col-span-2 { grid-column: span 2;  }
.col.col-span-3 { grid-column: span 3;  }
.col.col-span-4 { grid-column: span 4;  }
.col.col-span-5 { grid-column: span 5;  }
.col.col-span-6 { grid-column: span 6;  }
.col.col-span-7 { grid-column: span 7;  }
.col.col-span-8 { grid-column: span 8;  }
.col.col-span-9 { grid-column: span 9;  }
.col.col-span-10 { grid-column: span 10;  }

/* Row spans */
.col.row-span-2 { grid-row: span 2;  }
.col.row-span-3 { grid-row: span 3;  }
.col.row-span-4 { grid-row: span 4;  }
.col.row-span-5 { grid-row: span 5;  }
.col.row-span-6 { grid-row: span 6;  }
.col.row-span-7 { grid-row: span 7;  }
.col.row-span-8 { grid-row: span 8;  }
.col.row-span-9 { grid-row: span 9;  }
.col.row-span-10 { grid-row: span 10;  }

/* Alignments */
.av, .av .grid { vertical-align: middle; align-items: center; }


@media (max-width: 1024px) {
	
	.col.col-span-2, .col.col-span-3, .col.col-span-4 { grid-column: span 1; }
	.col.[class*="col-span-"] { grid-column: span 1; }
	.col.[class*="row-span-"] { grid-row: span 1; }	
	
	/* Grids */
	.grid-1 { grid-template-columns: repeat(1, 1fr); }
	.grid-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-5 { grid-template-columns: repeat(3, 1fr); }
	.grid-6 { grid-template-columns: repeat(3, 1fr); }
	.grid-7 { grid-template-columns: repeat(3, 1fr); }
	.grid-8 { grid-template-columns: repeat(4, 1fr); }
	.grid-9 { grid-template-columns: repeat(4, 1fr); }
	.grid-10 { grid-template-columns: repeat(4, 1fr); }
	.grid-11 { grid-template-columns: repeat(4, 1fr); }
	.grid-12 { grid-template-columns: repeat(6, 1fr); }	
}


@media (max-width: 768px) {
	
}

/* Row spans for smaller screens - this resets everything back to span one column on mobiles */
@media (max-width: 576px) { 
	.col.row-span-2, .col.row-span-3, .col.row-span-4 { grid-row: span 1; }
	/* Grids */
	.grid-1 { grid-template-columns: repeat(1, 1fr); }
	.grid-2 { grid-template-columns: repeat(1, 1fr); }
	.grid-3 { grid-template-columns: repeat(1, 1fr); }
	.grid-4 { grid-template-columns: repeat(1, 1fr); }
	.grid-5 { grid-template-columns: repeat(1, 1fr); }
	.grid-6 { grid-template-columns: repeat(1, 1fr); }
	.grid-7 { grid-template-columns: repeat(1, 1fr); }
	.grid-8 { grid-template-columns: repeat(1, 1fr); }
	.grid-9 { grid-template-columns: repeat(1, 1fr); }
	.grid-10 { grid-template-columns: repeat(1, 1fr); }
	.grid-11 { grid-template-columns: repeat(1, 1fr); }
	.grid-12 { grid-template-columns: repeat(1, 1fr); }	
	
	.grid-1-2 { grid-template-columns: 1fr; }
	.grid-1-3 { grid-template-columns: 1fr; }
	.grid-2-1 { grid-template-columns: 1fr; }
	.grid-3-1 { grid-template-columns: 1fr; }
}