style: make main grid single column on mobile

Author: caro-vh

Wireframe/style.css

@@ -65,26 +65,25 @@ main {
   padding: 0 var(--space);
 }
 
+main > article:first-child {
+  grid-column: span 2;
+}
+
+@media (max-width: 768px) {
+  main {
+    grid-template-columns: 1fr;
+  }
+  main > article:first-child {
+    grid-column: span 1;
+  }
+}
+
 footer {
   position: fixed;
   bottom: 0;
   text-align: center;
 }
-/* ====== Articles Grid Layout ====
-Setting the rules for how articles are placed in the main element.
-Inspect this in Devtools and click the "grid" button in the Elements view
-Play with the options that come up.
-https://developer.chrome.com/docs/devtools/css/grid
-https://gridbyexample.com/learn/
-*/
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
-}
+
 /* ====== Article Layout ====== 
 Setting the rules for how elements are placed in the article. 
 Now laying out just the INSIDE of the repeated card/article design.