docs: improve mobile spacings

docs/src/components/AppSection/style.scss

@@ -4,7 +4,7 @@
   &__inner {
     position: relative;
     z-index: 2;
-    padding: 5rem 1rem;
+    padding: 5rem 1.5rem;
     margin: 0 auto;
     max-width: 50rem;
 

docs/src/components/PageFooter/style.scss

@@ -4,7 +4,7 @@
   background: $colorBlack;
   color: $colorWhite;
   flex-direction: column;
-  padding: 3rem 1rem;
+  padding: 3rem 1.5rem;
   font-size: 0.85rem;
   overflow: hidden;
 

docs/src/layouts/App/base.scss

@@ -163,7 +163,7 @@ code {
     }
 
     &.is-large {
-      font-size: 3rem;
+      font-size: 2.5rem;
 
       @media (min-width: 600px) {
         font-size: 3.75rem;

docs/src/layouts/App/style.scss

@@ -33,7 +33,7 @@ $menuBreakPoint: 800px;
     align-items: center;
     flex: 0 0 auto;
     height: $navHeight;
-    padding: 0 1rem;
+    padding: 0 1.5rem;
 
     @media (min-width: $mobileBreakPoint) {
       padding: 0 2rem;
@@ -312,7 +312,7 @@ $menuBreakPoint: 800px;
   }
 
   &__mobile-menu {
-    padding: 1rem 0 1rem 1rem;
+    padding: 1rem 0 1rem 1.5rem;
     flex: 1 1 auto;
     overflow-x: hidden;
     overflow-y: auto;