fix(feat): Add and Rearrange the img container after screen change

src/styles/hero.css

@@ -21,7 +21,7 @@
 .hero__inner {
   position: relative;
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   align-items: flex-start;
   width: 100%;
   max-width: 1280px;
@@ -32,13 +32,21 @@
 }
 
 .hero__phone-column {
-  display: none;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding-top: 24px;
+  pointer-events: none;
 }
 
 .hero__phone-frame {
   position: relative;
-  width: 100%;
-  aspect-ratio: 673 / 1108;
+  z-index: 2;
+  width: min(320px, 100%);
+  height: 527px;
 }
 
 .hero__phone-crop {
@@ -58,6 +66,8 @@
 }
 
 .hero__content {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -218,14 +228,20 @@
   }
 
   .hero__phone-column {
-    display: flex;
     align-items: center;
+    justify-content: flex-start;
     flex: 1;
     min-width: 0;
     height: 100%;
     padding-top: 60px;
   }
 
+  .hero__phone-frame {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 673 / 1108;
+  }
+
   .hero__content {
     width: 660px;
     padding: 80px 0;