Add small-screen layout for main navigation

app/assets/stylesheets/main_nav.scss

@@ -1,4 +1,5 @@
 @import "variables";
+@import "mediaqueries";
 
 #main-nav {
   width: 100%;
@@ -12,15 +13,34 @@
   }
 
   ul {
+    @include media-max(large) {
+      display: grid;
+      grid-template-columns: repeat(1fr);
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+
     li {
+      @include media-min(large) {
         display: inline;
+      }
+
+      @include media-max(large) {
+        display: block;
+      }
 
       a {
         display: inline-block;
-        padding: 1.5rem;
+        padding: 1.5rem 2rem;
         text-decoration: none;
         color: $text-color-discreet;
 
+        @include media-max(large) {
+          display: block;
+          text-align: center;
+          padding-left: 0;
+          padding-right: 0;
+        }
+
         &.active {
           color: $text-color-body;
           border-bottom: 2px solid #ffd000;

app/views/shared/_main_nav.html.erb

@@ -1,7 +1,5 @@
 <nav id="main-nav">
   <div class="wrapper">
-    <div class="site">
-    </div>
     <ul class="pages">
       <li>
         <%= link_to "Services", root_path,
@@ -16,7 +14,5 @@
               class: @current_section == "invitations" ? "active" : nil %>
       </li>
     </ul>
-    <div class="user">
-    </div>
   </div>
 </nav>