update responsive grid system

1 files changed, 40 insertions, 17 deletions

diff --git a/src/layout.less b/src/layout.less
index ccdd609..9c6a4e5 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -22,7 +22,9 @@
   }
 }
 
+// Responsive grid system
 .columns {
+  display: block;
   margin-left: -1rem;
   margin-right: -1rem;
   &:extend(.clearfix all);
@@ -30,27 +32,26 @@
 .column {
   flex: 1;
   padding: 1rem;
+
+  &.col-12,
+  &.col-11,
+  &.col-10,
+  &.col-9,
+  &.col-8,
+  &.col-7,
+  &.col-6,
+  &.col-5,
+  &.col-4,
+  &.col-3,
+  &.col-2,
+  &.col-1 {
+    flex: none;
+  }
 }
-@media screen and (min-width: 769px) {
+@media screen and (min-width: 841px) {
   .columns {
     display: flex;
   }
-  .column {
-    &.col-12,
-    &.col-11,
-    &.col-10,
-    &.col-9,
-    &.col-8,
-    &.col-7,
-    &.col-6,
-    &.col-5,
-    &.col-4,
-    &.col-3,
-    &.col-2,
-    &.col-1 {
-      flex: none;
-    }
-  }
   .col-12 {
     width: 100%;
   }
@@ -88,6 +89,28 @@
     width: 8.33333333%;
   }
 }
+@media screen and (min-width: 481px) and (max-width: 840px) {
+  .columns {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .col-12 {
+    width: 100%;
+  }
+  .col-11,
+  .col-10,
+  .col-9,
+  .col-8,
+  .col-7,
+  .col-6,
+  .col-5,
+  .col-4,
+  .col-3,
+  .col-2,
+  .col-1 {
+    width: 50%;
+  }
+}
 
 // Responsive breakpoint system
 @media screen and (max-width: 480px) {