Update index to re-flow flex items based on max-width

package.json

@@ -25,7 +25,7 @@
     "@types/alpinejs": "^3.13.11",
     "alpinejs": "^3.15.12",
     "android-sms-gateway": "^3.0.0",
-    "astro": "^7.0.7",
+    "astro": "7.0.8",
     "iconify-icon": "^3.0.2",
     "ofetch": "^1.5.1",
     "otplib": "12.0.1",

src/pages/index.astro

@@ -254,8 +254,11 @@ import Layout from "@layouts/BaseLayout.astro";
       flex-direction: row;
       align-items: center;
     }
-    .sided > div {
-      flex: auto;
+    @media (max-width: 768px) {
+      .sided {
+        text-align: center;
+        flex-direction: column;
+      }
     }
   </style>
   <Fragment slot="main">
@@ -263,9 +266,9 @@ import Layout from "@layouts/BaseLayout.astro";
       id="hero"
       x-data="{
         themes: [
-          { value: 'winternight', label: 'Winternight' },
-          { value: 'sunnyvale-forest', label: 'SunnyVale' },
-          { value: 'city-destroyed', label: 'Apocalypse' },
+          { value: 'winternight', label: 'Winternight Valley' },
+          { value: 'sunnyvale-forest', label: 'Sunnyvale' },
+          { value: 'city-destroyed', label: 'Apocalyptia' },
         ],
         index: 0,
         get theme() { return this.themes[this.index].value },
@@ -276,7 +279,8 @@ import Layout from "@layouts/BaseLayout.astro";
         <div>
           <h2>Hi, I'm badblocks!</h2>
           <p>I ♥ building websites and making things!</p>
-        </div><div class="desktop">
+        </div>
+        <div class="desktop">
           <div class="desktop-monitor">
             <div class="desktop-audio"></div>
             <div class="desktop-screen" @click="next()">