.grid {
	box-sizing: border-box;
	width:100%;
}

.grid > col-*  {
	padding: 3;
}

.col-1 {
	float: left;
	width: 8.3333%
}

.col-2 {
	float: left;
	width: 16.666666%;
}

.col-3 {
	float: left;
	width: 33%;
}

.col-4 {
	float: left;
	width: 25%;
}

.col-4 {
	float: left;
	width: 20%;
}

.col-6 {
	float: left;
	width: 50%;
}

.col-12{
	float: left;
	width: 100%;
}


/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
	.col-1,
	.col-2{
		width: 100%;
	}
	
	.col-6{
		width: 50%;
	}
}