* {
	box-sizing: border-box;
}

.grid {
	display: flex;
	flex-wrap: wrap;
}

nav .grid-col-1of4 {
	flex-grow: 1;
	flex-basis: 100%;
}

.grid-col-1of3 {
	flex-grow: 1;
	flex-basis: 100%;
}

.grid-col-2of3 {
	flex-grow: 1;
	flex-basis: 100%;
}

.grid-col-1of2 {
	flex-grow: 1;
	flex-basis: 100%;
}

@media (min-width: 25.5em) {

	nav .grid-col-1of4 {
		flex-basis: 50%;
	}

	.grid-col-1of3 {
		flex-basis: 100%;
	}

	.grid-col-2of3 {
		flex-basis: 100%;
	}

}


@media (min-width: 53em) {

	.grid-col-1of3 {
		flex-basis: 33.33%;
	}

	.grid-col-2of3 {
		flex-basis: 66.66%;
	}

}


@media (min-width: 50.9375em) {

	nav .grid-col-1of4 {
		flex-basis: 25%;
	}

}

@media (min-width: 53em) {

	.grid-col-1of2 {
		flex-basis: 50%;
	}

}