From 7b45ca94a679f024995aea39bf13cdb89fb411b3 Mon Sep 17 00:00:00 2001
From: SeekingGamer <160568653+SeekingGamer@users.noreply.github.com>
Date: Mon, 18 May 2026 14:39:56 +0800
Subject: [PATCH] fix(style): Changes responsive layout breakpoint

---
 src/styles/download.css |  2 +-
 src/styles/features.css |  2 +-
 src/styles/footer.css   |  2 +-
 src/styles/header.css   |  4 +-
 src/styles/hero.css     | 87 +++++++++++++++++++++++++++++++----------
 src/styles/preview.css  |  2 +-
 src/styles/sections.css |  8 ++--
 src/styles/trust.css    |  6 +--
 src/styles/why.css      |  2 +-
 9 files changed, 81 insertions(+), 34 deletions(-)

diff --git a/src/styles/download.css b/src/styles/download.css
index 07dc0ed..e875bd4 100644
--- a/src/styles/download.css
+++ b/src/styles/download.css
@@ -279,7 +279,7 @@
     }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
     .download-cta {
         height: 600px;
     }
diff --git a/src/styles/features.css b/src/styles/features.css
index 502de2f..5a68535 100644
--- a/src/styles/features.css
+++ b/src/styles/features.css
@@ -172,7 +172,7 @@
   }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
   .features__header {
     padding: 0 clamp(36px, 14vw, 180px);
   }
diff --git a/src/styles/footer.css b/src/styles/footer.css
index a5375f6..f61f435 100644
--- a/src/styles/footer.css
+++ b/src/styles/footer.css
@@ -103,7 +103,7 @@
   }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
   .site-footer {
     padding: 60px 0;
   }
diff --git a/src/styles/header.css b/src/styles/header.css
index 6592fe7..41926b3 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -301,7 +301,7 @@
     }
 }
 
-@media (min-width: 501px) and (max-width: 1022px) {
+@media (min-width: 501px) and (max-width: 1024px) {
     .mobile-nav__languages {
         grid-template-columns: repeat(5, minmax(0, 1fr));
     }
@@ -333,7 +333,7 @@
     background: #e07a3b;
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
     .site-header__bar {
         padding: 0 24px;
     }
diff --git a/src/styles/hero.css b/src/styles/hero.css
index 7666ffc..7ec3715 100644
--- a/src/styles/hero.css
+++ b/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) {
diff --git a/src/styles/preview.css b/src/styles/preview.css
index 236fd7b..b421dc5 100644
--- a/src/styles/preview.css
+++ b/src/styles/preview.css
@@ -206,7 +206,7 @@
     }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
     .app-preview {
         padding: 120px clamp(32px, 6vw, 130px) 0;
     }
diff --git a/src/styles/sections.css b/src/styles/sections.css
index e6b734f..ab99e29 100644
--- a/src/styles/sections.css
+++ b/src/styles/sections.css
@@ -316,7 +316,7 @@
     color: #7a726d;
 }
 
-@media (max-width: 639px) {
+@media (max-width: 640px) {
     .use-cases__rows {
         gap: 24px;
         overflow: visible;
@@ -368,7 +368,7 @@
     }
 }
 
-@media (min-width: 626px) {
+@media (min-width: 1024px) {
     .experience__grid {
         grid-template-columns: repeat(2, minmax(0, 320px));
     }
@@ -415,7 +415,7 @@
     }
 }
 
-@media (min-width: 920px) {
+@media (min-width: 1200px) {
     .experience__grid {
         grid-template-columns: repeat(3, minmax(0, 320px));
     }
@@ -425,7 +425,7 @@
     }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
     .experience {
         padding-top: 60px;
         padding-bottom: 60px;
diff --git a/src/styles/trust.css b/src/styles/trust.css
index 1e10322..a016395 100644
--- a/src/styles/trust.css
+++ b/src/styles/trust.css
@@ -162,7 +162,7 @@
   height: 100%;
 }
 
-@media (max-width: 1022px) {
+@media (max-width: 1024px) {
   .trust-card__copy {
     align-items: center;
     text-align: center;
@@ -215,7 +215,7 @@
   }
 }
 
-@media (min-width: 768px) and (max-width: 1022px) {
+@media (min-width: 768px) and (max-width: 1024px) {
   .trust__grid > .trust-card:nth-child(1),
   .trust__grid > .trust-card:nth-child(5) {
     position: relative;
@@ -234,7 +234,7 @@
   }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
   .trust {
     padding-top: 60px;
     padding-bottom: 60px;
diff --git a/src/styles/why.css b/src/styles/why.css
index c27d4e8..a3105ad 100644
--- a/src/styles/why.css
+++ b/src/styles/why.css
@@ -279,7 +279,7 @@
     }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
     .why {
         padding-top: 60px;
         padding-bottom: 60px;
-- 
2.49.1