fix(feat): Change styling for responsive layout

src/styles/download.css

@@ -232,7 +232,7 @@ a.store-badge {
     height: 292px;
 }
 
-@media (min-width: 577px) {
+@media (min-width: 578px) {
     .download-cta__phone {
         width: min(418px, calc(100vw - 32px));
         height: auto;

src/styles/sections.css

@@ -92,7 +92,7 @@
 }
 
 .experience-card__image--one {
-    top: -86.50%;
+    top: -86.5%;
     left: 0;
     width: 100%;
     height: 298.5%;
@@ -316,7 +316,7 @@
     color: #7a726d;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 578px) {
     .use-cases__rows {
         gap: 24px;
         overflow: visible;
@@ -368,7 +368,7 @@
     }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 578px) {
     .experience__grid {
         grid-template-columns: repeat(2, minmax(0, 320px));
     }
@@ -384,7 +384,7 @@
     }
 }
 
-@media (min-width: 640px) {
+@media (min-width: 578px) {
     .use-case-row {
         grid-template-columns: minmax(220px, 300px) minmax(280px, 1fr);
         height: 120px;
@@ -425,6 +425,12 @@
     }
 }
 
+@media (min-width: 576px) {
+    .experience-card__title {
+        white-space: nowrap;
+    }
+}
+
 @media (min-width: 1024px) {
     .experience {
         padding-top: 60px;
@@ -432,10 +438,6 @@
         padding-left: 36px;
         padding-right: 36px;
     }
-
-    .experience-card__title {
-        white-space: nowrap;
-    }
 }
 
 @media (min-width: 1200px) {
@@ -452,7 +454,7 @@
     }
 }
 
-@media (min-width: 1295px) {
+@media (min-width: 1201px) {
     .use-cases {
         padding: 60px 64px;
     }

src/styles/trust.css

@@ -223,7 +223,7 @@
 
     .trust__grid > .trust-card:nth-child(1)::after,
     .trust__grid > .trust-card:nth-child(5)::after {
-    content: '';
+        content: "";
         position: absolute;
         top: 50%;
         right: -16px;