mobile work on home page and other padding and margin adjustments

Author: jwcooper

assets/sass/layout/_grid.scss

@@ -1,14 +1,14 @@
 .common-layout {
-  padding: 20px 0 200px 0;
+  padding-bottom: 20px;
 
   display: grid;
   grid-template-columns:
-      [full-start] minmax(1em, 1fr)
-      [main-start] minmax(0, 80em) [main-end]
-      minmax(1em, 1fr) [full-end];
+    [full-start] minmax(1em, 1fr)
+    [main-start] minmax(0, 80em) [main-end]
+    minmax(1em, 1fr) [full-end];
   grid-row-gap: 1em;
 
-  &> * {
+  & > * {
     grid-column: main;
   }
 
@@ -17,6 +17,5 @@
     border: 1px solid #cecece;
     border-radius: 5px;
     padding: 40px;
-
   }
 }

assets/sass/layout/_header_mobile.scss

@@ -5,6 +5,7 @@
 
   .header-contents {
     padding: 9px 5px 5px 8px;
+    margin-bottom: 20px;
   }
 
   /* screen reader only */

assets/sass/pages/_downloads.scss

@@ -3,7 +3,7 @@
 @use "../base/variables";
 
 #downloads-page {
-  padding: 20px 0 200px 0;
+  padding-bottom: 200px;
   display: grid;
   grid-template-columns:
     [full-start] minmax(1em, 1fr)

assets/sass/pages/_home.scss

@@ -58,6 +58,7 @@
 
         span {
           align-self: flex-end;
+          padding-right: 20px;
 
           p {
             vertical-align: bottom;
@@ -121,13 +122,53 @@
     }
   }
 }
-
 @media only screen and (max-width: variables.$screen-md-max) {
   #home-page {
+    .two-column-content {
+      .text {
+        h1 {
+          font-size: 2.5em;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: variables.$screen-md) {
+  #home-page {
+    .two-column-content {
+      .text {
+        padding: 20px;
+
+        h1 {
+          font-size: 1.5em;
+          margin: 0;
+          padding: 0;
+        }
+      }
+      .image .image-title img {
+        display: none;
+      }
+    }
   }
 }
 
 @media only screen and (max-width: variables.$screen-xs-max) {
   #home-page {
+    .two-column-content {
+      grid-template-columns: 1fr;
+
+      .text {
+        aspect-ratio: auto;
+      }
+    }
+
+    .one-column-content {
+      section {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        column-gap: 20px;
+      }
+    }
   }
 }

index.html

@@ -24,7 +24,7 @@ <h1>The easiest way to program microcontrollers</h1>
         />
       <span class="image-title">
         <span>
-          <p>Sketch Drawing Toy by Ruiz Brothers</p>
+          <p>Sketch Drawing Toy that is really cool and wraps by Ruiz Brothers</p>
         </span>
         <img alt="Made with CircuitPython Logo"
                                   src="{{ "assets/images/made_with_circuitpython.svg" |