/* SETUP */

:root {
	--gap: calc(var(--spacing) * .1vw);
}

@media (orientation: portrait) {
	:root {
		--gap: calc(var(--spacing) * .1vh);
	}
}

html, body{
	margin: 0;
	padding: 0
}

.section {
	overflow: hidden;
	position: relative;
}

.row {
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
}

.column {
	position: relative;
}

.column.empty {
	display: none;
}

.column.span-2,
.column.span-3{
	grid-column: span 2 / auto;
}

.column.span-4,
.column.span-5,
.column.span-6,
.column.span-7,
.column.span-8,
.column.span-9,
.column.span-10,
.column.span-11,
.column.span-12,
.column.span-13,
.column.span-14,
.column.span-15,
.column.span-16,
.column.span-17,
.column.span-18,
.column.span-19,
.column.span-20,
.column.span-21,
.column.span-22,
.column.span-23,
.column.span-24{
	grid-column: span 4 / auto;
}


@media all and (min-width:30rem) {

	.row {
		grid-template-columns: repeat(6,1fr);
	}

	.column.span-3,
	.column.span-4,
	.column.span-5{
		grid-column: span 3 / auto;
	}

	.column.span-6,
	.column.span-8,
	.column.span-10,
	.column.span-12,
	.column.span-14,
	.column.span-16,
	.column.span-18,
	.column.span-20,
	.column.span-22,
	.column.span-24{
		grid-column: span 6 / auto;
	}

}

@media all and (min-width:40rem) {

	.row {
		grid-template-columns: repeat(12,1fr);
	}

	.column.span-4,
	.column.span-5{
		grid-column: span 4 / auto;
	}

	.column.span-6,
	.column.span-7 {
		grid-column: span 6 / auto;
	}

	.column.span-8,
	.column.span-9,
	.column.span-10,
	.column.span-11{
		grid-column: span 8 / auto;
	}

	.column.span-12,
	.column.span-14,
	.column.span-16,
	.column.span-18,
	.column.span-20,
	.column.span-22,
	.column.span-24{
		grid-column: span 12 / auto;
	}

}

@media all and (min-width:60rem) {

	.row {
		grid-template-columns: repeat(24,1fr);
	}

	.column.span-5 {
		grid-column: span 5 / auto;
	}

	.column.span-7 {
		grid-column: span 7 / auto;
	}

	.column.span-8 {
		grid-column: span 8 / auto;
	}

	.column.span-9 {
		grid-column: span 9 / auto;
	}

	.column.span-10 {
		grid-column: span 10 / auto;
	}

	.column.span-11 {
		grid-column: span 11 / auto;
	}

	.column.span-12 {
		grid-column: span 12 / auto;
	}

	.column.span-13 {
		grid-column: span 13 / auto;
	}

	.column.span-14 {
		grid-column: span 14 / auto;
	}

	.column.span-15 {
		grid-column: span 15 / auto;
	}

	.column.span-16 {
		grid-column: span 16 / auto;
	}

	.column.span-17 {
		grid-column: span 17 / auto;
	}

	.column.span-18 {
		grid-column: span 18 / auto;
	}

	.column.span-19 {
		grid-column: span 19 / auto;
	}

	.column.span-20 {
		grid-column: span 20 / auto;
	}

	.column.span-21 {
		grid-column: span 21 / auto;
	}

	.column.span-22 {
		grid-column: span 22 / auto;
	}

	.column.span-23 {
		grid-column: span 23 / auto;
	}

	.column.span-24 {
		grid-column: span 24 / auto;
	}

	.column.empty {
		display: inherit;
	}

}