diff --git a/src/components/flow/FlowGrid/styles.scss b/src/components/flow/FlowGrid/styles.scss
index bfc6dc1f..bda06973 100644
--- a/src/components/flow/FlowGrid/styles.scss
+++ b/src/components/flow/FlowGrid/styles.scss
@@ -8,11 +8,27 @@ $cols: $content_width / $cell;
 .grid_test {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));
-  grid-template-rows: $cell;
+  grid-template-rows: 40vh $cell;
   grid-auto-rows: $cell;
   grid-auto-flow: row dense;
   grid-column-gap: $grid_line;
   grid-row-gap: $grid_line;
+
+  @media (max-width: $cell * 5) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @media (max-width: $cell * 4) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media (max-width: $cell * 3) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: $cell * 2) {
+    grid-template-columns: repeat(1, 1fr);
+  }
 }
 
 .pad_last {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index e86b5b2f..e05cd282 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -106,7 +106,9 @@ $input_shadow_filled: $input_shadow;
 }
 
 @mixin phone {
-  @content;
+  @media (max-width: 320px) {
+    @content;
+  }
 }
 
 @mixin tablet {
@@ -114,6 +116,11 @@ $input_shadow_filled: $input_shadow;
     @content;
   }
 }
+@mixin desktop {
+  @media (max-width: $content_width) {
+    @content;
+  }
+}
 
 @mixin vertical_at_tablet {
   @media (max-width: 599px) {