fix(feat): Rearrange the element to fix the responsive layout

src/styles/download.css

@@ -14,8 +14,8 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 100%;
-    max-width: 1920px;
+    width: 1920px;
+    max-width: none;
     height: 923px;
     pointer-events: none;
     transform: translate(-50%, -50%);
@@ -35,34 +35,41 @@
 
 .download-cta__content {
     display: flex;
+    order: 2;
     flex: 1;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     justify-content: center;
     min-width: 0;
     gap: 36px;
     overflow: clip;
+    text-align: center;
 }
 
 .download-cta__copy {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     width: 100%;
     gap: 16px;
 }
 
 .download-cta__heading {
+    --download-heading-title-size: 32px;
     display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
+    flex-wrap: nowrap;
+    align-items: center;
     flex-shrink: 0;
     gap: 20px;
+    max-width: 100%;
 }
 
 .download-cta__title {
+    position: relative;
+    top: -4px;
     margin: 0;
-    font-size: 32px;
+    flex-shrink: 0;
+    font-size: var(--download-heading-title-size);
     font-weight: 700;
     line-height: 1.2;
     color: #1a1a1a;
@@ -72,8 +79,8 @@
 .download-cta__logo-frame {
     position: relative;
     flex-shrink: 0;
-    width: 188px;
-    height: 72px;
+    width: calc(var(--download-heading-title-size) * 3.9167);
+    height: calc(var(--download-heading-title-size) * 1.5);
 }
 
 .download-cta__logo {
@@ -88,10 +95,11 @@
 .download-cta__description {
     max-width: 542px;
     margin: 0;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 400;
     line-height: 1.5;
     color: #7a726d;
+    text-align: center;
 }
 
 .store-badges {
@@ -189,10 +197,11 @@
 
 .download-cta__phone {
     position: relative;
-    display: none;
+    display: block;
+    order: 1;
     flex-shrink: 0;
-    width: 418px;
-    height: 510px;
+    width: min(418px, calc(100vw - 32px));
+    aspect-ratio: 418 / 510;
 }
 
 .download-cta__phone-crop {
@@ -211,17 +220,36 @@
     height: 136.1%;
 }
 
-@media (min-width: 570px) {
-    .store-badges {
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-start;
+@media (max-width: 397px) {
+    .download-cta__heading {
+        --download-heading-title-size: clamp(24px, 8vw, 32px);
+        gap: clamp(8px, 2.5vw, 12px);
+    }
+
+    .download-cta__title {
+        line-height: 1;
     }
 }
 
-@media (min-width: 768px) {
-    .download-cta__title {
-        font-size: 40px;
+@media (max-width: 569px) {
+    .store-badge {
+        width: min(100%, calc(100vw - 32px));
+    }
+}
+
+@media (min-width: 570px) {
+    .download-cta__heading {
+        --download-heading-title-size: 40px;
+    }
+
+    .download-cta__description {
+        font-size: 18px;
+    }
+
+    .store-badges {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
     }
 }
 
@@ -236,12 +264,31 @@
         padding: 0 24px;
     }
 
-    .download-cta__title {
-        font-size: 48px;
+    .download-cta__content {
+        order: 1;
+        align-items: flex-start;
+        text-align: left;
+    }
+
+    .download-cta__copy {
+        align-items: flex-start;
+    }
+
+    .download-cta__description {
+        text-align: left;
+    }
+
+    .store-badges {
+        justify-content: flex-start;
+    }
+
+    .download-cta__heading {
+        --download-heading-title-size: 48px;
     }
 
     .download-cta__phone {
-        display: block;
+        order: 2;
+        width: 418px;
     }
 }