* {
	box-sizing: border-box;
}


.grid {
	/*
		By setting the 'display' property to a value of 'flex', we are setting the container to use flexbox for its layout.
	*/
	display: flex;

	/*
		The 'flex-wrap' property specifies if children of the flexbox must sit on one line, or if they can be wrapped into multiple lines.
	*/
	flex-wrap: wrap;
}

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

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

@media (min-width: 768px) {
	.grid-col-1of3 {
	flex-grow: 1;
	flex-basis: 25%;
	}

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