2 files changed, 18 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;
+  }
+}
diff --git a/index.html b/index.html
index 0f229ff..85c2849 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>Setup AIRMX device</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <script defer src="main.mjs"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>