some wip. still broken

app/base.css

@@ -31,20 +31,13 @@ html {
 }
 
 body {
-  display: grid;
-  grid-template-columns: minmax(500px, 1080px);
-  grid-template-rows: 54px 700px 54px;
-  align-content: center;
-  align-items: center;
-  justify-items: stretch;
-  justify-content: center;
-  font-family: Futura, -apple-system, BlinkMacSystemFont, 'SF Pro Text',
-    'segoe ui', 'helvetica neue', helvetica, ubuntu, roboto, noto, arial,
-    sans-serif;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
+    'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
   height: 100vh;
-  background: #f9f9fa;
   margin: 0;
-  padding: var(--grid-basis);
+  background-color: #f8f9fa;
 }
 
 input,
@@ -60,12 +53,41 @@ a {
 }
 
 .main {
+  flex: 1 1 auto;
   background: var(--pageBGColor);
   box-shadow: var(--large-box-shadow);
-  display: grid;
-  grid-template-columns: minmax(400px, 1fr) 1fr;
-  width: 100%;
+  width: 90%;
   height: 100%;
+  max-width: 960px;
+  max-height: 600px;
+  align-self: center;
+  margin: auto 0;
+}
+
+.split {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.split__left {
+  height: 100%;
+  width: 360px;
+  margin: 0;
+  border-right: 1px solid #d7d7db;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.split__right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  position: relative;
 }
 
 .noscript {
@@ -74,30 +96,6 @@ a {
   border-radius: 6px;
 }
 
-.main__file-manager,
-.main__context {
-  padding: calc(var(--grid-basis) * 2);
-}
-
-.main__file-manager {
-  border-right: 2px solid black;
-}
-
-.main__context {
-  display: flex;
-  flex-direction: column;
-}
-
-.main__context-footer,
-.main__signup-promo {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.main__file-list {
-  flex: 1;
-}
-
 .footer__mozLogo {
   width: 112px;
   height: 32px;
@@ -107,11 +105,10 @@ a {
 .btn {
   display: flex;
   width: 100%;
-  height: 70px;
   line-height: 1.2;
   align-items: center;
   justify-content: center;
-  padding: 0 10px;
+  padding: 16px;
   font-size: 17px;
   font-weight: 500;
   text-transform: uppercase;
@@ -190,7 +187,9 @@ a {
 
 .page {
   height: 100%;
-  margin: 0;
+  width: 75%;
+  margin: 0 auto;
+  padding: 24px;
   display: flex;
   flex-direction: column;
   text-align: center;
@@ -226,13 +225,6 @@ a {
   }
 }
 
-.goBackButton {
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin: 18px;
-}
-
 .error {
   color: var(--errorColor);
   font-weight: 600;
@@ -261,6 +253,10 @@ a {
   visibility: visible !important;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 .noDisplay {
   display: none !important;
 }
@@ -269,39 +265,34 @@ a {
   flex: 1;
 }
 
-@media (max-device-width: 750px), (max-width: 750px) {
-  .description {
-    margin: 0 auto 25px;
+@media (max-device-width: 720px), (max-width: 720px) {
+  body {
+    height: unset;
   }
 
   .main {
-    flex-direction: column;
-    height: 100%;
+    box-shadow: none;
+    align-items: center;
+    max-height: none;
+    width: 100%;
   }
 
-  .spacer {
-    flex: none;
-    height: 0;
+  .split {
+    flex-direction: column-reverse;
+    align-items: center;
   }
 
-  .stripedBox {
-    margin-top: 72px;
-    min-height: 400px;
-    flex: 1;
+  .split__left {
+    border: none;
+    height: 600px;
+  }
+
+  .description {
+    margin: 0 auto 25px;
   }
 
   .uploads {
     flex: none;
     padding-top: 6px;
   }
-
-  .footer {
-    margin: 15px;
-  }
-}
-
-@media (max-device-width: 700px), (max-width: 700px) {
-  .stripedBox {
-    margin-top: 72px;
-  }
 }