Make it mobile ftw

css/pages/_about-me.sass

@@ -1,90 +1,106 @@
-.intro
-  display: grid
-  grid-template-columns: 1fr 1fr 1fr 1fr
-  grid-gap: 0 2rem
+.skills
+  h3
+    margin-bottom: 0.5rem
+  ul
+    margin: 0
+    padding: 0
+    list-style: none
+    display: flex
+    flex-wrap: wrap
+  li
+    display: block
+    line-height: 2
+    margin: 0 0.05rem
+    padding: 0
+    &::before, &::after
+      content: "."
+      display: inline-block
+      vertical-align: super
+    &::before
+      margin-right: 0.3rem
+    &::after
+      margin-left: 0.3rem
 
+@include media('<tablet')
   .meatball-headshot
-    grid-column: 4 / span 1
-    grid-row: 1 / span 2
+    text-align: center
 
-  .myself
-    grid-column: 1 / span 3
-    grid-row: 1
+  .meatball-jellybean
+    text-align: center
+    > *
+      width: 14rem
+      margin: 0 auto
+      text-align: $text-align-default
 
-  .life-itself
-    grid-column: 1 / span 3
-    grid-row: 2
+  .skills
+    ul
+      justify-content: center
 
-.personally-online
-  display: grid
-  grid-template-columns: 1fr 3fr
-  grid-gap: 0 2rem
+@include media('>tablet')
+  .intro
+    display: grid
+    grid-template-columns: 1fr 1fr 1fr 1fr
+    grid-gap: 0 2rem
 
-  .meatball-jellybean
-    grid-column: 1 / span 1
-    text-align: center
-    figcaption
-      text-align: justify
+    .meatball-headshot
+      grid-column: 4 / span 1
+      grid-row: 1 / span 2
 
-  .life-on-site
-    grid-column: 2 / span 1
+    .myself
+      grid-column: 1 / span 3
+      grid-row: 1
 
-.professional-offering
-  padding-bottom: 1rem
-  margin-top: 3rem
-  margin-bottom: 3rem
-  > h2
-    padding: 0 0 0.5rem
-    margin: 0.5rem 0 0
+    .life-itself
+      grid-column: 1 / span 3
+      grid-row: 2
 
-.professional-toolbox
-  display: grid
-  grid-template-columns: 1fr 1fr 2fr
-  grid-gap: 0 2rem
+  .personally-online
+    display: grid
+    grid-template-columns: 1fr 3fr
+    grid-gap: 0 2rem
 
-  .skills
-    h3
-      margin-bottom: 0.5rem
-    ul
-      margin: 0
-      padding: 0
-      list-style: none
-      display: flex
-      flex-wrap: wrap
-    li
-      display: block
-      line-height: 2
-      margin: 0 0.05rem
-      padding: 0
-      &::before, &::after
-        content: "."
-        display: inline-block
-        vertical-align: super
-      &::before
-        margin-right: 0.3rem
-      &::after
-        margin-left: 0.3rem
-
-  .foundations
-    grid-column: 1 / span 2
-    grid-row: 1
-
-  .languages
-    grid-column: 1 / span 1
-    grid-row: 2
-
-  .databases
-    grid-column: 2 / span 1
-    grid-row: 2
-
-  .interfaces
-    grid-column: 1 / span 1
-    grid-row: 3
-
-  .integrations
-    grid-column: 2 / span 1
-    grid-row: 3
-
-  .professionally-applied
-    grid-column: 3 / span 2
-    grid-row: 1 / span 3
+    .meatball-jellybean
+      grid-column: 1 / span 1
+      text-align: center
+      figcaption
+        text-align: justify
+
+    .life-on-site
+      grid-column: 2 / span 1
+
+  .professional-offering
+    padding-bottom: 1rem
+    margin-top: 3rem
+    margin-bottom: 3rem
+    > h2
+      padding: 0 0 0.5rem
+      margin: 0.5rem 0 0
+
+  .professional-toolbox
+    display: grid
+    grid-template-columns: 1fr 1fr 2fr
+    grid-gap: 0 2rem
+
+    .foundations
+      grid-column: 1 / span 2
+      grid-row: 1
+
+    .languages
+      grid-column: 1 / span 1
+      grid-row: 2
+
+    .databases
+      grid-column: 2 / span 1
+      grid-row: 2
+
+    .interfaces
+      grid-column: 1 / span 1
+      grid-row: 3
+
+    .integrations
+      grid-column: 2 / span 1
+      grid-row: 3
+
+    .professionally-applied
+      grid-column: 3 / span 2
+      grid-row: 1 / span 3