/*
@media screen and (max-width: 480px){
	.grid[data-columns]::before {
		content: '1 .column.size-1of1';
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	.grid[data-columns]::before {
		content: '2 .column.size-1of2';
	}
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
	.grid[data-columns]::before {
		content: '3 .column.size-1of3';
	}
}
@media screen and (min-width: 1200px) {
	.grid[data-columns]::before {
		content: '4 .column.size-1of4';
	}
}
*/

@media only screen and (max-width : 320px) {
	.grid[data-columns]::before {
		content: '1 .column.size-1of1';
		display: none;
	}
}
@media screen and (min-width: 321px) and (max-width: 768px) {
	.grid[data-columns]::before {
		content: '2 .column.size-1of2';
		display: none;
	}
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
	.grid[data-columns]::before {
		content: '3 .column.size-1of3';
		display: none;
	}
}
@media screen and (min-width: 1200px) {
	.grid[data-columns]::before {
		content: '4 .column.size-1of4';
		display: none;
	}
}

.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
.size-1of4 { width: 25%; }

.size-1of1 div {
	padding: 5px 0px;
}
/*
.size-1of2:nth-of-type(1) div, .size-1of3:nth-of-type(1) div, .size-1of4:nth-of-type(1) div {
	margin: 5px 5px 5px 0px;
}
.size-1of2:nth-of-type(2) div, .size-1of3:nth-of-type(3) div, .size-1of4:nth-of-type(4) div {
	margin: 5px 0px 5px 5px;
}
.size-1of3:nth-of-type(2) div, .size-1of4:nth-of-type(2) div, .size-1of4:nth-of-type(3) div {
	margin: 5px;
}
*/
.size-1of2 div, .size-1of3 div, .size-1of4 div {
	margin-right: 10px;
	margin-bottom: 10px;
}

.size-1of1 img,
.size-1of2 img,
.size-1of3 img,
.size-1of4 img {
	width: 100%;
	height: auto;
}
.grid[data-columns]::after {
	clear: left;
	content: "";
	display: table;
}