fix(feat): Refine responsive layout and section spacing

src/styles/hero.css

@@ -265,17 +265,30 @@
         min-width: 0;
         height: 100%;
         padding-top: 60px;
+        overflow: hidden;
     }
 
     .hero__phone-frame {
         width: 100%;
         height: auto;
-        aspect-ratio: 673 / 1108;
+        aspect-ratio: 116 / 191;
+    }
+
+    .hero__phone-crop {
+        position: relative;
+        inset: auto;
+        overflow: visible;
+    }
+
+    .hero__phone {
+        position: static;
+        width: 100%;
+        height: auto;
     }
 
     .hero__content {
         width: 660px;
-        padding: 80px 0;
+        padding: 0;
     }
 }
 
@@ -295,6 +308,23 @@
     .hero__inner {
         padding: 0;
     }
+
+    .hero__phone-column {
+        align-items: flex-start;
+    }
+
+    .hero__phone-frame {
+        flex: 1 0 0;
+        width: auto;
+        max-width: calc(955px * 116 / 191);
+        height: 955px;
+        aspect-ratio: 116 / 191;
+    }
+
+    .hero__phone {
+        width: 100%;
+        height: 100%;
+    }
 }
 
 @media (min-width: 1376px) {