Wrap on mobile landing page

Signed-off-by: Martin Berg Alstad <git@martials.no>

src/components/Footer.astro

@@ -4,6 +4,6 @@ const gitUrl = import.meta.env.GIT_URL
 ---
 
 <div class="divider"></div>
-<div class="mx-auto">
+<div class="mx-auto py-5">
   <GiteaLink href={gitUrl} />
 </div>

src/components/Greeting.astro

@@ -5,16 +5,16 @@ import * as m from "../paraglide/messages.js"
 import "../styles/global.css"
 ---
 
-<div class="flex items-center justify-around">
+<div class="flex items-center justify-around flex-wrap">
   <div class="m-5">
-    <h1 class="text-7xl font-bold">
+    <h1 class="sm:text-7xl font-bold">
       {m.hiIm()}
       <br />
       Martin Berg Alstad
       <br />
       {m.position()}
     </h1>
-    <p class="mx-1 my-10">{m.aboutMe()}</p>
+    <p class="mx-1 sm:my-10">{m.aboutMe()}</p>
   </div>
-  <Image src={me} alt="Me on a hike" width="400" height="400" class="m-5" />
+  <Image src={me} alt="Me on a hike" width="400" height="400" class="p-5 mx-auto" />
 </div>

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro"
-import OnePager from "../components/Greeting.astro"
+import Greeting from "../components/Greeting.astro"
 ---
 
 <!--
@@ -17,5 +17,5 @@ One-pager
 - Certifications
 -->
 <Layout title="Velkommen">
-  <OnePager />
+  <Greeting />
 </Layout>