style: optimize for mobiles

src/views/Home.vue

@@ -143,9 +143,16 @@
       grid-column-gap: 2rem
       grid-template-columns: 1fr 2.25fr
 
+      @media (max-width: 768px)
+        grid-row-gap: 2rem
+        grid-template-columns: 1fr
+
       .img-wrapper
         +center
 
+        @media (max-width: 768px)
+          display: none
+
         img
           width: 100%
           border-radius: 4px
@@ -155,6 +162,9 @@
       +center
       flex-direction: column
 
+    .title
+      text-align: center
+
     .list
       display: grid
       grid-column-gap: 1px
@@ -165,11 +175,18 @@
       margin-top: 1rem
       padding: 0
 
+      @media (max-width: 768px)
+        grid-template-columns: 1fr
+        grid-template-rows: unset
+
   section.shards
     .wrapper
       +center
       flex-direction: column
 
+    .title
+      text-align: center
+
     .list
       display: grid
       grid-column-gap: 1rem
@@ -178,11 +195,17 @@
 
       margin-top: 2.5rem
 
+      @media (max-width: 768px)
+        grid-template-columns: 1fr
+
   section.patrons
     .wrapper
       +center
       flex-direction: column
 
+    .title
+      text-align: center
+
     .button img
       height: 3rem
       transition: all 100ms ease-out