Implement layout grid on Desktop

2 files changed, 2 insertions, 14 deletions

diff --git a/styles/base/_base.scss b/styles/base/_base.scss
index b7dd5bb..30c4dee 100644
--- a/styles/base/_base.scss
+++ b/styles/base/_base.scss
@@ -31,26 +31,12 @@ button:hover {
 }
 
 .main {
-  margin-left: 20rem;
   padding: 1rem 2rem;
-  max-width: 100%;
-  min-height: 100vh;
   box-sizing: border-box;
 
-  @media screen and (max-width: $widescreen) {
-    width: calc(100% - 20rem);
-  }
-
-  @media (min-width: $tablet) and (max-width: $desktop) {
-    margin-left: 15rem;
-    width: calc(100% - 15rem);
-  }
-
   @media screen and (max-width: $tablet) {
     margin-left: 0;
     padding: 0 1rem 1rem;
-    width: 100%;
-    min-height: initial;
     border-left: none;
     border-right: none;
     border-top: 1px solid $border-color;
diff --git a/styles/base/_layout.scss b/styles/base/_layout.scss
index 478ace9..237769c 100644
--- a/styles/base/_layout.scss
+++ b/styles/base/_layout.scss
@@ -1,6 +1,7 @@
 .wrapper {
   display: grid;
   grid-gap: $space-normal;
+  min-height: 100vh;
 
   // @media screen and (max-width: $phone) {
   //   grid-template-rows: $header-height 1fr auto $footer-height;
@@ -13,6 +14,7 @@
 
   @media screen and (min-width: $phone) {
     grid-template-columns: 320px 1fr;
+    grid-template-rows: 1fr 90px;
     grid-template-areas:
       "header main"
       "header footer";