/* FLEX-BOX FALLBACK FOR GRID */
@supports not (display: grid) {
	.grid-container {
		display: flex;
		flex-wrap: wrap;

	}

	.two-col {
		width: 50vw;
		display: block;
	}

	.three-col {
		width: 30vw;
		display: block;
		margin: auto;
	}
}

.grid-container {
	display: grid;
}

.two-col {
	grid-template-columns: auto auto;
	grid-template-rows: auto;
	grid-gap: 1em;
}

.three-col {
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1.5em;
}

.four-col {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 1em;
}

.grid-item {
	width: 100%;
	justify-content: center;
}

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

.row {
	max-width: 100%;
	height: inherit;
	padding: 2em 4em;
}



@media screen and (max-width: 768px) {

	.two-col {
		grid-template-columns: 1fr;
		grid-gap: 0;
	}

	.three-col {
		grid-template-columns: 1fr;
		grid-gap: 1em;
	}

	.row {
		padding: 2em 1em;
	}

}