Merge pull request 'finn-staging' (#10) from finn-staging into main

Reviewed-on: #10

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

@@ -162,7 +162,7 @@
     height: 100%;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 1023px) {
     .trust-card__copy {
         align-items: center;
         text-align: center;
@@ -215,7 +215,7 @@
     }
 }
 
-@media (min-width: 768px) and (max-width: 1024px) {
+@media (min-width: 768px) and (max-width: 1023px) {
     .trust__grid > .trust-card:nth-child(1),
     .trust__grid > .trust-card:nth-child(5) {
         position: relative;
@@ -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;
@@ -238,17 +238,42 @@
     .trust {
         padding-top: 60px;
         padding-bottom: 60px;
-    padding-left: 36px;
-    padding-right: 36px;
+        padding-left: 28px;
+        padding-right: 28px;
     }
 
     .trust__grid {
         display: flex;
-    gap: 24px;
+        gap: 14px;
     }
 
     .trust-card {
         flex: 1;
+        padding: 16px 8px;
+    }
+
+    .trust-card__icon-frame {
+        width: 112px;
+        height: 112px;
+    }
+
+    .trust-card__copy {
+        align-items: center;
+        text-align: center;
+    }
+
+    .trust-card__title {
+        font-size: 15px;
+        line-height: 20px;
+        letter-spacing: var(--ls-15);
+        text-align: center;
+    }
+
+    .trust-card__description {
+        font-size: 14px;
+        line-height: 1.45;
+        letter-spacing: var(--ls-14);
+        text-align: center;
     }
 
     .trust__divider {
@@ -266,6 +291,31 @@
         font-size: 18px;
         letter-spacing: var(--ls-18);
     }
+
+    .trust__grid {
+        gap: 24px;
+    }
+
+    .trust-card {
+        padding: 24px;
+    }
+
+    .trust-card__icon-frame {
+        width: 128px;
+        height: 128px;
+    }
+
+    .trust-card__title {
+        font-size: 16px;
+        line-height: 22px;
+        letter-spacing: var(--ls-16);
+    }
+
+    .trust-card__description {
+        font-size: 15px;
+        line-height: 1.5;
+        letter-spacing: var(--ls-15);
+    }
 }
 
 @media (min-width: 1376px) {