From 6998fe446d43f66bac0a28402386c0e5ddb23991 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Fri, 1 Sep 2017 00:54:13 +0800
Subject: [PATCH] Lessen gutters on mobile

---
 _sass/2017/components/h3-section.scss | 2 +-
 _sass/2017/utils/section-gutter.scss  | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/_sass/2017/components/h3-section.scss b/_sass/2017/components/h3-section.scss
index 645fb83fc..b5ea8383e 100644
--- a/_sass/2017/components/h3-section.scss
+++ b/_sass/2017/components/h3-section.scss
@@ -50,7 +50,7 @@
   }
 
   &::after {
-    @include section-gutter(margin-left, $multiplier: 2);
+    @include section-gutter(margin-left, $multiplier: 1.5);
     content: '';
     display: inline-block;
     vertical-align: middle;
diff --git a/_sass/2017/utils/section-gutter.scss b/_sass/2017/utils/section-gutter.scss
index 56b8b8cfc..b21df549b 100644
--- a/_sass/2017/utils/section-gutter.scss
+++ b/_sass/2017/utils/section-gutter.scss
@@ -1,3 +1,11 @@
 @mixin section-gutter($property, $multiplier: 1) {
   #{$property}: 16px * $multiplier;
+
+  @media (max-width: 480px) {
+    #{$property}: 8px * $multiplier;
+  }
+
+  @media (max-width: 768px) {
+    #{$property}: 12px * $multiplier;
+  }
 }