/* SETUP */

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

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

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

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

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

.column {
	position: relative;
}

.column.empty {
	display: none;
}

.column.span-2,
.column.span-3,
.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{
	grid-column: span 2 / auto;
}


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

	.row {
		grid-template-columns: repeat(3,1fr);
	}
	.column.span-3,
	.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{
		grid-column: span 3 / auto;
	}

}

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

	.row {
		grid-template-columns: repeat(6,1fr);
	}
	
	.column.span-6,
	.column.span-7,
	.column.span-8,
	.column.span-9,
	.column.span-10,
	.column.span-11,
	.column.span-12{
		grid-column: span 6 / auto;
	}

}

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

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

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

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

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

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

	.column.span-6 {
		grid-column: span 6 / 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.empty {
		display: inherit;
	}

}