New h3 styles

_sass/2017/components/h2-section.scss

@@ -10,7 +10,7 @@
 
   @media (min-width: 481px) {
     & + & {
-      margin-top: 32px;
+      margin-top: 48px;
     }
   }
 }

_sass/2017/components/h3-section-list.scss

@@ -1,7 +1,3 @@
-@mixin section-gutter($property, $multiplier: 1) {
-  #{$property}: 12px * $multiplier;
-}
-
 /*
  * H3 section list:
  * The body that is isotoped.
@@ -33,7 +29,6 @@
   @media (min-width: 769px) {
     & > .h3-section {
       padding-top: 0;
-      padding-bottom: 16px;
     }
   }
 }
@@ -79,12 +74,6 @@
   }
 }
 
-.h3-section-list.-wide-second {
-  & > .h3-section:nth-child(2) {
-    width: 100%;
-  }
-}
-
 /*
  * Three column, left reference
  */

_sass/2017/components/h3-section.scss

@@ -37,6 +37,29 @@
   }
 }
 
+/*
+ * Heading
+ */
+
+.h3-section > h3 {
+  & {
+    @include section-gutter(margin-bottom, $multiplier: 1);
+    @include section-gutter(margin-top, $multiplier: .5);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &::after {
+    @include section-gutter(margin-left, $multiplier: 2);
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(to right, rgba($base-a, 0.3), transparent 80%);
+  }
+}
+
 /*
  * Children
  */
@@ -110,7 +133,7 @@
 }
 
 /*
- * Prime
+ * Variant: Prime
  */
 
 .h3-section.-prime > .body {
@@ -120,6 +143,10 @@
   }
 }
 
+/*
+ * Variant: Also see :\
+ */
+
 ul.-also-see.-also-see.-also-see {
   display: flex;
   flex-wrap: wrap;

_sass/2017/markdown/headings.scss

@@ -4,7 +4,7 @@
 
 .MarkdownBody h2 {
   @include heading-style;
-  @include font-size(5);
+  @include font-size(6);
   line-height: 1.2;
   font-weight: 300;
   font-family: $heading-font;

_sass/2017/style.scss

@@ -6,6 +6,7 @@
 @import './utils/font-size';
 @import './utils/gutter';
 @import './utils/heading-style';
+@import './utils/section-gutter';
 @import './utils/section-with-container';
 @include ion-font;
 @import './base/base';

_sass/2017/utils/heading-style.scss

@@ -2,31 +2,16 @@
   margin: 0;
   padding: 0;
   margin-bottom: 16px + 8px;
-  padding-bottom: 16px + 8px;
   margin-top: 64px;
   position: relative;
 
-  // Line
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(to right, $dark-line-color 50%, transparent);
-  }
-
   @media (max-width: 768px) {
     margin-bottom: 8px;
     margin-top: 32px;
-    padding-bottom: 8px;
   }
 
   @media (max-width: 480px) {
     margin-bottom: 8px;
     margin-top: 32px;
-    padding-bottom: 8px;
   }
 }

_sass/2017/utils/section-gutter.scss

@@ -0,0 +1,3 @@
+@mixin section-gutter($property, $multiplier: 1) {
+  #{$property}: 16px * $multiplier;
+}