Merge pull request 'fix(style): Changes responsive layout breakpoint' (#8) from finn-staging into main

Reviewed-on: #8

src/styles/download.css

@@ -279,7 +279,7 @@
     }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
     .download-cta {
         height: 600px;
     }

src/styles/features.css

@@ -172,7 +172,7 @@
   }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
   .features__header {
     padding: 0 clamp(36px, 14vw, 180px);
   }

src/styles/footer.css

@@ -103,7 +103,7 @@
   }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
   .site-footer {
     padding: 60px 0;
   }

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;
     }

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) {

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;
     }

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;

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;

src/styles/why.css

@@ -279,7 +279,7 @@
     }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
     .why {
         padding-top: 60px;
         padding-bottom: 60px;