Refactor SASS flex-cols

styles/_layout.scss

@@ -79,9 +79,7 @@
   }
 
   &__wrap {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    @include flex-cols();
   }
 
   &__subtext {

styles/_mixins.scss

@@ -33,4 +33,10 @@
   @media (max-width: $width-tablet-1) {
     margin-top: 64px;
   }
+}
+
+@mixin flex-cols() {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

styles/_vars.scss

@@ -43,6 +43,7 @@ $width-max: 1440px;
 $width-tablet-1: 1024px;
 $width-tablet-2: 768px;
 $width-mobile: 640px;
+$width-small: 480px;
 $width-padding: 4.4444444444vw;
 
 /******************************************************************************

styles/pages/_home.scss

@@ -60,9 +60,25 @@
 .dilemma {
   text-align: center;
 
+  &__wrap {
+    @include flex-cols();
+  }
+
+  &__headline {
+    @media (max-width: $width-small) {
+        max-width: 320px;
+      }
+  }
+
   &__subtext {
     margin-top: 16px;
     margin-bottom: 64px;
+
+    div {
+      @media (max-width: $width-small) {
+        max-width: 270px;
+      }
+    }
   }
 
   &__tables {
@@ -112,6 +128,10 @@
       cursor: pointer;
       user-select: none;
 
+      p {
+        line-height: 1;
+      }
+
       img {
         width: 50%;
 
@@ -183,9 +203,13 @@
   text-align: center;
 
   &__wrap {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    @include flex-cols();
+  }
+
+  &__headline {
+    @media (max-width: $width-small) {
+      max-width: 320px;
+    }
   }
 
   &__subtext {

styles/pages/_why.scss

@@ -88,9 +88,7 @@
   text-align: center;
   
   &__wrap {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    @include flex-cols();
   }
 
   &__subtext {
@@ -111,9 +109,7 @@
   }
 
   &__logo {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    @include flex-cols();
 
     img {
       width: 200px;