*, *::after, *::before {
	box-sizing: border-box;
}

[class^='grid-col-'] {
	float: left;
	padding: 0; 
	margin-top: -0.5em;
}

.grid-col-1of4 {
	width: 100%;
}

.grid-row::after {
	content: "";
	display: block;
	clear: both;
}

@media (min-width: 48.75em) {
	.grid-col-1of4 {
		width: 25%;
	}

	.grid-col-1of6 {
		width: 15%;
	}
	
	.grid-col-1of3{
		width: 33.3%;
	}
	.grid-col-1of2{
		width:50%;
	}
	.grid-col-12of12{
		width:100%;
	}


}