From 4dafbd8275b32d8ed37e774c0cc764bccbdc0d98 Mon Sep 17 00:00:00 2001
From: Josh Rutherford <joshua.rutherford1@gmail.com>
Date: Sat, 24 Jul 2021 07:00:08 -0500
Subject: [PATCH] Fixing hero layout.

---
 src/App.scss       |  2 +-
 src/hero/hero.scss | 24 +++++++++++++-----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 1a9cbdc..f798278 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -54,7 +54,7 @@ h3 {
 p {
   font-size: 1.25rem;
   font-weight: 300;
-  line-height: 1.6875rem;
+  line-height: 2rem;
   color: rgba(255, 255, 255, 0.7);
   margin: 2rem auto;
 }
diff --git a/src/hero/hero.scss b/src/hero/hero.scss
index eb67c5e..0cdf6b6 100644
--- a/src/hero/hero.scss
+++ b/src/hero/hero.scss
@@ -6,11 +6,7 @@ $horizontal_breakpoint: 724px;
   display: grid;
   justify-content: center;
   gap: 2rem;
-  grid-template-columns: minmax(auto, 30rem);
-
-  @media all and (min-width: $horizontal_breakpoint) {
-    grid-template-columns: 1fr 1fr;
-  }
+  grid-template-columns: (minmax(auto, 30rem));
 
   h1 {
     font-size: 3.5rem;
@@ -46,19 +42,25 @@ $horizontal_breakpoint: 724px;
 
   .content {
     align-self: flex-end;
+    grid-column: 1;
   }
 
   .more-content {
+    display: grid;
     grid-column: 1 / span 2;
-
-    @media all and (min-width: $horizontal_breakpoint) {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      column-gap: inherit;
-    }
+    gap: inherit;
+    grid-template-columns: inherit;
 
     &:not(.visible) {
       @extend .offscreen;
     }
   }
+
+  @media all and (min-width: $horizontal_breakpoint) {
+    grid-template-columns: 1fr 1fr;
+
+    .content {
+      grid-column: unset;
+    }
+  }
 }