init'

assets/sass/components/_section.scss

@@ -0,0 +1,111 @@
+/* Section/Article */
+
+section,
+article {
+  &.special {
+    text-align: center;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  .box-wrapper {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+header {
+  &.major {
+    margin-bottom: (_size(element-margin) * 1.5);
+
+    h2 {
+      font-size: 2em;
+
+      &:after {
+        display: block;
+        content: "";
+        width: 3.25em;
+        height: 2px;
+        margin: (_size(element-margin) * 0.35) 0 (_size(element-margin) * 0.5) 0;
+        border-radius: 2px;
+
+        section.special &,
+        article.special & {
+          margin-left: auto;
+          margin-right: auto;
+        }
+      }
+    }
+
+    p {
+      font-size: 1.25em;
+      letter-spacing: _font(letter-spacing);
+    }
+
+    &.special {
+      text-align: center;
+
+      h2 {
+        &:after {
+          margin-left: auto;
+          margin-right: auto;
+        }
+      }
+    }
+  }
+}
+
+footer {
+  &.major {
+    margin-top: (_size(element-margin) * 1.5);
+  }
+}
+
+@include breakpoint("<=small") {
+  header {
+    &.major {
+      margin-bottom: 0;
+
+      h2 {
+        font-size: 1.5em;
+      }
+
+      p {
+        font-size: 1em;
+        letter-spacing: 0;
+
+        br {
+          display: none;
+        }
+      }
+    }
+  }
+
+  footer {
+    &.major {
+      margin-top: 0;
+    }
+  }
+}
+
+@mixin color-section($p: null) {
+  header {
+    &.major {
+      h2 {
+        &:after {
+          background-color: _palette($p, border);
+
+          @if $p == "invert" {
+            @include vendor(
+              "background-image",
+              "linear-gradient(90deg, #{_palette(accent1)}, #{_palette(accent3)}, #{_palette(accent5)})"
+            );
+          }
+        }
+      }
+    }
+  }
+}
+
+@include color-section;