fixed alignment in mobile devices

src/components/Hero.astro

@@ -2,32 +2,36 @@
 import HeroContent from "./HeroContent.astro";
 ---
 
-<div class="relative transition-all isolate flex items-center px-6 -m-10 lg:px-8 mb-56 w-[100vw] h-[100vh]">
-  <div
-    class="absolute inset-x-0 -z-50 overflow-hidden blur-3xl"
-    aria-hidden="true"
-  >
+<div
+  class="flex items-center justify-center h-[100vh] -m-10 lg:px-8 mb-56 px-8"
+>
+  <div class="relative transition-all isolate ">
     <div
-      class="back animate-roam relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#e0e0e0] to-[#797979] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-      style={{
-        clipPath:
-          "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-      }}
+      class="absolute inset-x-0 -z-50 overflow-hidden blur-3xl"
+      aria-hidden="true"
     >
+      <div
+        class="back animate-roam relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#e0e0e0] to-[#797979] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+        style={{
+          clipPath:
+            "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+        }}
+      >
+      </div>
     </div>
-  </div>
-  <HeroContent />
-  <div
-    class="absolute inset-x-0 top-[calc(100%-13rem)] -z-50 overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-    aria-hidden="true"
-  >
+    <HeroContent />
     <div
-      class="animate-roam1 relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#e0e0e0] to-[#797979] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
-      style={{
-        clipPath:
-          "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-      }}
+      class="absolute inset-x-0 top-[calc(100%-13rem)] -z-50 overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+      aria-hidden="true"
     >
+      <div
+        class="animate-roam1 relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#e0e0e0] to-[#797979] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+        style={{
+          clipPath:
+            "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+        }}
+      >
+      </div>
     </div>
   </div>
 </div>