fix(style): Changes responsive layout breakpoint

src/styles/hero.css

@@ -191,7 +191,7 @@
     }
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 1024px) {
     .hero__actions {
         flex-wrap: nowrap;
     }
@@ -246,30 +246,13 @@
         font-size: 56px;
         letter-spacing: var(--ls-56);
     }
-}
-
-@media (min-width: 1024px) {
-    .hero {
-        height: 891px;
-    }
-
-    .hero__inner {
-        flex-direction: row;
-        padding: 0 24px;
-    }
 
     .hero__phone-column {
-        align-items: center;
-        justify-content: flex-start;
-        flex: 1;
-        min-width: 0;
-        height: 100%;
         padding-top: 60px;
-        overflow: hidden;
     }
 
     .hero__phone-frame {
-        width: 100%;
+        width: min(580px, 100%);
         height: auto;
         aspect-ratio: 116 / 191;
     }
@@ -285,9 +268,59 @@
         width: 100%;
         height: auto;
     }
+}
+
+@media (min-width: 1024px) {
+    .hero {
+        height: 891px;
+    }
+
+    .hero__inner {
+        flex-direction: row;
+        padding: 0 24px;
+    }
+
+    .hero__phone-column {
+        position: relative;
+        flex: 1;
+        min-width: 0;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .hero__phone-frame {
+        position: absolute;
+        top: 60px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+    }
+
+    .hero__phone-crop {
+        position: relative;
+        inset: auto;
+        height: 100%;
+        overflow: visible;
+    }
+
+    .hero__phone {
+        position: static;
+        width: auto;
+        height: 100%;
+    }
+
+    .hero__actions {
+        flex-wrap: nowrap;
+    }
+
+    .hero__store-badge {
+        flex: 0 1 auto;
+        min-width: 0;
+    }
 
     .hero__content {
-        width: 660px;
+        width: clamp(560px, 44vw, 600px);
         padding: 0;
     }
 }
@@ -311,9 +344,15 @@
 
     .hero__phone-column {
         align-items: flex-start;
+        padding-top: 60px;
     }
 
     .hero__phone-frame {
+        position: static;
+        top: auto;
+        right: auto;
+        bottom: auto;
+        overflow: visible;
         flex: 1 0 0;
         width: auto;
         max-width: calc(955px * 116 / 191);
@@ -321,10 +360,18 @@
         aspect-ratio: 116 / 191;
     }
 
+    .hero__phone-crop {
+        height: auto;
+    }
+
     .hero__phone {
         width: 100%;
         height: 100%;
     }
+
+    .hero__content {
+        width: clamp(560px, 52vw, 660px);
+    }
 }
 
 @media (min-width: 1376px) {