wip: responsive ui

1 files changed, 17 insertions, 8 deletions

diff --git a/app.css b/app.css
index 8d4c683..4fe0c88 100644
--- a/app.css
+++ b/app.css
@@ -88,6 +88,7 @@ fieldset {
 
 body {
   display: grid;
+  grid: max-content max-content 4.5rem / auto;
   justify-content: center;
   font-family: "Inter", sans-serif;
   color: var(--color-white);
@@ -95,25 +96,19 @@ body {
   min-height: 100vh;
 }
 
-@media (min-width: 768px) {
-  body {
-    grid: max-content max-content 4.5rem / 40rem;
-  }
-}
-
 .page__header {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin-block-start: 4.5rem;
+  margin-block-start: 2rem;
 }
 
 .container {
   position: relative;
   margin-block-start: 3rem;
   grid-row: 2;
-  padding: 3rem 4rem 4rem;
+  padding: 2rem 1.5rem 3rem;
   background: linear-gradient(324deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.06));
   border-radius: 0.375rem;
 }
@@ -372,3 +367,17 @@ body {
 .retry-message--shown {
   display: block;
 }
+
+@media (min-width: 768px) {
+  body {
+    grid: max-content max-content 4.5rem / 40rem;
+  }
+
+  .page__header {
+    margin-block-start: 4.5rem;
+  }
+
+  .container {
+    padding: 3rem 4rem 4rem;
+  }
+}