New CSS grid layout

app/styles/_layout.scss

@@ -1,11 +1,36 @@
 #topbar {
+  height: 3rem;
+}
+
+main {
+  padding: 1rem;
+
+  &#index {
+    width: 100%;
+    display: grid;
+    grid-row-gap: 2rem;
+    grid-template-areas:
+      "people"
+      "contributions";
+  }
+}
+
+@media (min-width: 550px) {
+  main {
+    &#index {
+      grid-column-gap: 4rem;
+      grid-row-gap: 2rem;
+      grid-template-columns: 2fr 4fr;
+      grid-template-areas:
+      "people contributions"
+    }
+  }
 }
 
 main section {
-  @include outer-container;
   margin-bottom: 8rem;
   &:first-of-type {
-    margin-top: 6rem;
+    margin-top: 2rem;
   }
 
   @include media($mobile) {
@@ -16,19 +41,11 @@ main section {
   }
 
   header {
-    @include span-columns(12);
     padding-bottom: 3rem;
     text-align: center;
-    // background-color: purple;
 
     @include media($mobile) {
-      @include span-columns(10);
-      @include shift(1);
       padding-bottom: 2rem;
     }
-
-    div.content {
-      @include span-columns(12);
-    }
   }
 }

app/styles/app.scss

@@ -43,14 +43,11 @@ h1, h2, h3, h4, h5, input, button {
 
 section {
   h2 {
-    font-size: 2.8rem;
+    font-size: 2rem;
     color: $primaryColor;
-    @include media($mobile) {
-      font-size: 2rem;
-    }
   }
 
-  &#contributors {
+  &#people {
     .content {
       p.stats {
         padding-top: 3rem;

app/styles/settings/_neat.scss

@@ -2,4 +2,4 @@
 // $visual-grid-color: red;
 // $visual-grid-index: front;
 // $visual-grid-opacity: 0.5;
-$max-width: em(500, 12);
+$max-width: em(1200, 12);