index: give the hero the whole first screen

Out of flow it cleared the header by hand and `.main-content` reserved
its space, so the logo sat under the header and off-centre, the text
could run into the next section on short viewports, and the section
stopped short of filling the screen on phones.

Back in flow the layout clears the header and reserves the hero's space
on its own; sizing it to the screen below the header does the rest. The
fixed inline insets go too, so the hero follows the content column.

Author: thomasbuilds

src/pages/index.astro

@@ -126,16 +126,6 @@ const { t, localizeHref } = Astro.locals;
 </Layout>
 
 <style>
-  :root {
-    --hero-min-height: calc(75vh + 3rem);
-  }
-
-  @supports (height: 100dvh) {
-    :root {
-      --hero-min-height: calc(75dvh + 3rem);
-    }
-  }
-
   h2 {
     font-size: var(--font-size-3xl);
     color: var(--heading-color);
@@ -162,29 +152,15 @@ const { t, localizeHref } = Astro.locals;
     mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
   }
 
-  .main-content {
-    position: relative;
-    margin-top: calc(
-      var(--hero-min-height) - var(--page-top-margin)
-    ) !important;
-  }
-
   .index-hero {
-    position: absolute;
-    top: 3rem;
-    inset-inline: 5rem;
-    min-height: var(--hero-min-height);
+    margin-block-start: calc(-1 * var(--page-top-margin));
+    min-block-size: calc(100vh - var(--header-height));
+    min-block-size: calc(100dvh - var(--header-height));
   }
 
   #about-monero,
   #start-using-monero,
   #get-involved {
     scroll-margin-block-start: var(--anchor-offset);
   }
-
-  @media (width <= 600px) {
-    .index-hero {
-      inset-inline: 2rem;
-    }
-  }
 </style>