Fix skills section flexbox, Fix grid for mobile

Author: joshmfrankel

_sass/_tailwindcss.scss

@@ -75,6 +75,10 @@
   display: flex;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .flex-col {
   flex-direction: column;
 }

_sass/components/_grid.scss

@@ -2,7 +2,9 @@
   display: grid;
 
   &-two-columns {
-    grid-template-columns: repeat(2, 1fr);
+    @media screen and (min-width: 600px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
   }
 
   &-item {

_sass/components/_home.scss

@@ -25,7 +25,11 @@
       color: lighten($accent-color, 20%);
       font-size: 8.8rem;
       display: inline-block;
-      padding: 20px;
+      padding: 4px;
+
+      @media screen and (min-width: 600px) {
+        padding: 16px;
+      }
 
       &:hover {
         color: lighten($accent-color, 30%);
@@ -49,7 +53,8 @@
     p {
       margin: 10px 0;
     }
-    p, a {
+    p,
+    a {
       color: $primary-inverse-color;
       font-size: 1.8rem;
     }

_sass/components/_tooltip.scss

@@ -2,6 +2,7 @@
   $root: &;
   position: relative;
   display: inline-block;
+  margin-bottom: 16px;
 
   &-text {
     background-color: lighten($accent-color, 20%);

index.html

@@ -48,7 +48,7 @@ <h2>What I Do</h2>
   <div class="Container">
     <h2>My Skillset</h2>
 
-    <div class="Container-row">
+    <div class="flex flex-wrap justify-between">
       <div class="TooltipContainer">
         <i class="devicon-ruby-plain" alt="Ruby language icon"></i>
         <div class="TooltipContainer-text TooltipContainer-text--bottom">