@media only screen {
[class*="grid-"] {
display: block;
padding: 0;
margin: 0 -0.625em;
*zoom: 1;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
}

[class*="grid-"]:before,
[class*="grid-"]:after { content: " "; display: table; }

[class*="grid-"]:after { clear: both; }
[class*="grid-"] > li {
display: inline;
height: auto;
float: left;
padding: 0 3% 15px 3%;
text-align:left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.sm-grid-1 > li { width: 100%; padding: 0 3% 15px 3%; }

.sm-grid-1 > li:nth-of-type(n) { clear: none; }

.sm-grid-1 > li:nth-of-type(1n+1) { clear: both; }

.sm-grid-2 > li { width: 50%; padding: 0 3% 15px 3%; }

.sm-grid-2 > li:nth-of-type(n) { clear: none; }

.sm-grid-2 > li:nth-of-type(2n+1) { clear: both; }

.sm-grid-3 > li { width: 33.33333%; padding: 0 3% 15px 3%; }

.sm-grid-3 > li:nth-of-type(n) { clear: none; }

.sm-grid-3 > li:nth-of-type(3n+1) { clear: both; }

.sm-grid-4 > li { width: 25%; padding: 0 3% 15px 3%; }

.sm-grid-4 > li:nth-of-type(n) { clear: none; }

.sm-grid-4 > li:nth-of-type(4n+1) { clear: both; }

.sm-grid-5 > li { width: 20%; padding: 0 3% 15px 3%; }

.sm-grid-5 > li:nth-of-type(n) { clear: none; }

.sm-grid-5 > li:nth-of-type(5n+1) { clear: both; }

.sm-grid-6 > li { width: 16.66667%; padding: 0 3% 15px 3%; }

.sm-grid-6 > li:nth-of-type(n) { clear: none; }

.sm-grid-6 > li:nth-of-type(6n+1) { clear: both; }

.sm-grid-7 > li { width: 14.28571%; padding: 0 3% 15px 3%; }

.sm-grid-7 > li:nth-of-type(n) { clear: none; }

.sm-grid-7 > li:nth-of-type(7n+1) { clear: both; }

.sm-grid-8 > li { width: 12.5%; padding: 0 3% 15px 3%; }

.sm-grid-8 > li:nth-of-type(n) { clear: none; }

.sm-grid-8 > li:nth-of-type(8n+1) { clear: both; }

.sm-grid-9 > li { width: 11.11111%; padding: 0 3% 15px 3%; }

.sm-grid-9 > li:nth-of-type(n) { clear: none; }

.sm-grid-9 > li:nth-of-type(9n+1) { clear: both; }

.sm-grid-10 > li { width: 10%; padding: 0 3% 15px 3%; }

.sm-grid-10 > li:nth-of-type(n) { clear: none; }

.sm-grid-10 > li:nth-of-type(10n+1) { clear: both; }

.sm-grid-11 > li { width: 9.09091%; padding: 0 3% 15px 3%; }

.sm-grid-11 > li:nth-of-type(n) { clear: none; }

.sm-grid-11 > li:nth-of-type(11n+1) { clear: both; }

.sm-grid-12 > li { width: 8.33333%; padding: 0 3% 15px 3%; }

.sm-grid-12 > li:nth-of-type(n) { clear: none; }

.sm-grid-12 > li:nth-of-type(12n+1) { clear: both; }
}

/* Block grids for above sm breakpoint */
@media only screen and (min-width: 768px) {

/* Remove sm grid clearing */
.sm-grid-1 > li:nth-of-type(1n+1) { clear: none; }

.sm-grid-2 > li:nth-of-type(2n+1) { clear: none; }

.sm-grid-3 > li:nth-of-type(3n+1) { clear: none; }

.sm-grid-4 > li:nth-of-type(4n+1) { clear: none; }

.sm-grid-5 > li:nth-of-type(5n+1) { clear: none; }

.sm-grid-6 > li:nth-of-type(6n+1) { clear: none; }

.sm-grid-7 > li:nth-of-type(7n+1) { clear: none; }

.sm-grid-8 > li:nth-of-type(8n+1) { clear: none; }

.sm-grid-9 > li:nth-of-type(9n+1) { clear: none; }

.sm-grid-10 > li:nth-of-type(10n+1) { clear: none; }

.sm-grid-11 > li:nth-of-type(11n+1) { clear: none; }

.sm-grid-12 > li:nth-of-type(12n+1) { clear: none; }

.lg-grid-1 > li { width: 100%; padding: 0 3% 15px 3%; }

.lg-grid-1 > li:nth-of-type(n) { clear: none; }

.lg-grid-1 > li:nth-of-type(1n+1) { clear: both; }

.lg-grid-2 > li { width: 50%; padding: 0 3% 15px 3%; }

.lg-grid-2 > li:nth-of-type(n) { clear: none; }

.lg-grid-2 > li:nth-of-type(2n+1) { clear: both; }

.lg-grid-3 > li { width: 33.33333%; padding: 0 3% 15px 3%; }

.lg-grid-3 > li:nth-of-type(n) { clear: none; }

.lg-grid-3 > li:nth-of-type(3n+1) { clear: both; }

.lg-grid-4 > li { width: 25%; padding: 0 3% 15px 3%; }

.lg-grid-4 > li:nth-of-type(n) { clear: none; }

.lg-grid-4 > li:nth-of-type(4n+1) { clear: both; }

.lg-grid-5 > li { width: 20%; padding: 0 3% 15px 3%; }

.lg-grid-5 > li:nth-of-type(n) { clear: none; }

.lg-grid-5 > li:nth-of-type(5n+1) { clear: both; }

.lg-grid-6 > li { width: 16.66667%; padding: 0 3% 15px 3%; }

.lg-grid-6 > li:nth-of-type(n) { clear: none; }

.lg-grid-6 > li:nth-of-type(6n+1) { clear: both; }

.lg-grid-7 > li { width: 14.28571%; padding: 0 3% 15px 3%; }

.lg-grid-7 > li:nth-of-type(n) { clear: none; }

.lg-grid-7 > li:nth-of-type(7n+1) { clear: both; }

.lg-grid-8 > li { width: 12.5%; padding: 0 3% 15px 3%; }

.lg-grid-8 > li:nth-of-type(n) { clear: none; }

.lg-grid-8 > li:nth-of-type(8n+1) { clear: both; }

.lg-grid-9 > li { width: 11.11111%; padding: 0 3% 15px 3%; }

.lg-grid-9 > li:nth-of-type(n) { clear: none; }

.lg-grid-9 > li:nth-of-type(9n+1) { clear: both; }

.lg-grid-10 > li { width: 10%; padding: 0 3% 15px 3%; }

.lg-grid-10 > li:nth-of-type(n) { clear: none; }

.lg-grid-10 > li:nth-of-type(10n+1) { clear: both; }

.lg-grid-11 > li { width: 9.09091%; padding: 0 3% 15px 3%; }

.lg-grid-11 > li:nth-of-type(n) { clear: none; }

.lg-grid-11 > li:nth-of-type(11n+1) { clear: both; }

.lg-grid-12 > li { width: 8.33333%; padding: 0 3% 15px 3%; }

.lg-grid-12 > li:nth-of-type(n) { clear: none; }

.lg-grid-12 > li:nth-of-type(12n+1) { clear: both; }
}