Search

src/scss/components/_grid.scss

@@ -1,10 +1,17 @@
 
+@mixin grid_item( $cols ){
+	width: ( 0% + (( 100 / $cols ) - 4 ));
+	&:nth-child(#{$cols}) {
+		@include clearfix;
+	}
+}
+
 .grid {
 
 	padding: 40px 20px;
 
 	.grid-item {
-		width: 16%;
+		@include grid_item( 5 )
 		margin: 0 2% 3%;
 		display: inline-block;
 		vertical-align: top;
@@ -26,10 +33,6 @@
 			color: $secondary_grey;
 		}
 
-		&:nth-child(5) {
-			@include clearfix;
-		}
-
 		&:hover{
 			cursor: pointer;
 
@@ -37,14 +40,6 @@
 				opacity: 0.75;
 			}
 		}
-
-		@include responsive( 850px ){
-			width: 21%;
-		}
-
-		@include responsive( 650px ){
-			width: 29.3334%;
-		}
 	}
 
 	&.category-grid {
@@ -63,4 +58,51 @@
 			}
 		}
 	}
+
+	@include responsive( 2400px ){
+		&.mini {
+			.grid-item {
+				@include grid_item( 3 )
+			}			
+		}
+		&:not(.mini){
+			.grid-item {
+				@include grid_item( 6 )
+			}	
+		}
+	}
+
+	@include responsive( 1200px ){
+		&.mini {
+			.grid-item {
+				@include grid_item( 2 )
+			}			
+		}
+		&:not(.mini){
+			.grid-item {
+				@include grid_item( 5 )
+			}	
+		}
+	}
+
+	@include responsive( 850px ){
+		&.mini {
+			.grid-item {
+				@include grid_item( 2 )
+			}			
+		}
+		&:not(.mini){
+			.grid-item {
+				@include grid_item( 4 )
+			}	
+		}
+	}
+
+	@include responsive( 650px ){
+		&:not(.mini){
+			.grid-item {
+				@include grid_item( 3 )
+			}	
+		}
+	}
 }