From 6bc5e527a189fc71744f461b0d223179f2e4dd2d Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sat, 2 Sep 2017 00:20:18 +0800
Subject: [PATCH] Improve section gutters in mobile for readability

---
 _sass/2017/components/h3-section.scss | 12 +++++++++---
 _sass/2017/utils/section-gutter.scss  |  6 +-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/_sass/2017/components/h3-section.scss b/_sass/2017/components/h3-section.scss
index 5bc790fe7..fe486e49f 100644
--- a/_sass/2017/components/h3-section.scss
+++ b/_sass/2017/components/h3-section.scss
@@ -43,14 +43,20 @@
 
 .h3-section > h3 {
   & {
-    @include section-gutter(margin-bottom, $multiplier: 1);
-    @include section-gutter(margin-top, $multiplier: .5);
+    margin-top: 8px;
+    margin-bottom: 16px;
     white-space: nowrap;
     overflow: hidden;
   }
 
+  // Mobile: the padding below h3-section is enough
+  @media (max-width: 768px) {
+    margin-top: 0;
+  }
+
+  // Horizontal line
   &::after {
-    @include section-gutter(margin-left, $multiplier: 1.5);
+    margin-left: 24px;
     content: '';
     display: inline-block;
     vertical-align: middle;
diff --git a/_sass/2017/utils/section-gutter.scss b/_sass/2017/utils/section-gutter.scss
index b21df549b..46cdc5593 100644
--- a/_sass/2017/utils/section-gutter.scss
+++ b/_sass/2017/utils/section-gutter.scss
@@ -1,11 +1,7 @@
 @mixin section-gutter($property, $multiplier: 1) {
   #{$property}: 16px * $multiplier;
 
-  @media (max-width: 480px) {
+  @media (max-width: $area-width + 32px) {
     #{$property}: 8px * $multiplier;
   }
-
-  @media (max-width: 768px) {
-    #{$property}: 12px * $multiplier;
-  }
 }