Why jambonz facts -- styles/pages

styles/_typography.scss

@@ -198,9 +198,10 @@ em {
     font-size: $m-size;
   }
 
-  @media (max-width: $width-mobile) {
-    font-size: $ms-size;
-  }
+  // @note: Consideration on stopping type reduction here
+  // @media (max-width: $width-mobile) {
+  //   font-size: $ms-size;
+  // }
 }
 
 .p {
@@ -211,9 +212,10 @@ em {
     font-size: $m-size;
   }
 
-  @media (max-width: $width-tablet-2) {
-    font-size: $ms-size;
-  }
+  // @note: Consideration on stopping type reduction here
+  // @media (max-width: $width-tablet-2) {
+  //   font-size: $ms-size;
+  // }
 }
 
 .m {
@@ -229,9 +231,10 @@ em {
   font-size: $ms-size;
   line-height: 2;
 
-  @media (max-width: $width-tablet-1) {
-    font-size: $mxs-size;
-  }
+  // @note: Consideration on stopping type reduction here
+  // @media (max-width: $width-tablet-1) {
+  //   font-size: $mxs-size;
+  // }
 }
 
 .mxs {

styles/global.scss

@@ -44,14 +44,11 @@
 @import 'footer.scss';
 
 /******************************************************************************
- * Homepage
+ * Pages
 *******************************************************************************/
-@import 'homepage.scss';
-
-/******************************************************************************
- * Jambonz UI
-*******************************************************************************/
-@import 'jambonz-ui.scss';
+@import 'pages/home.scss';
+@import 'pages/why.scss';
+@import 'pages/jambonz-ui.scss';
 
 /******************************************************************************
  * Nextra

styles/pages/_why.scss

@@ -0,0 +1,76 @@
+/******************************************************************************
+ * Jambonz Facts
+*******************************************************************************/
+.facts {
+  padding-top: 96px;
+  padding-bottom: 32px;
+
+  @media (max-width: $width-tablet-1) {
+    padding-top: 64px;
+    padding-bottom: 0;
+  }
+
+  .icon {
+    transform: translateY(-4px);
+
+    @media (max-width: $width-tablet-1) {
+      transform: translateY(-8px);
+    }
+
+    @media (max-width: $width-tablet-2) {
+      transform: translateY(-10px);
+    }
+
+    @media (max-width: $width-mobile) {
+      transform: none;
+    }
+  }
+
+  &__wrap {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  &__item {
+    width: 100%;
+    max-width: 50%;
+    display: flex;
+    align-items: flex-start;
+    padding-bottom: 64px;
+
+    @media (max-width: $width-tablet-2) {
+      max-width: 100%;
+    }
+
+    @media (max-width: $width-mobile) {
+      flex-wrap: wrap;
+      text-align: center;
+      justify-content: center;
+    }
+  }
+
+  &__text {
+    width: calc(100% - #{$icon-size-1});
+    padding-left: 16px;
+    padding-right: 64px;
+
+    > div + div {
+      margin-top: 16px;
+    }
+
+    @media (max-width: $width-tablet-1) {
+      padding-right: 32px;
+    }
+
+    @media (max-width: $width-tablet-2) {
+      padding-right: 0;
+    }
+
+    @media (max-width: $width-mobile) {
+      width: 100%;
+      padding: 0 16px;
+      margin-top: 16px;
+    }
+  }
+}