Make landing page responsive

apps/ftu-ui/src/styles.scss

@@ -7,6 +7,7 @@
 html,
 body {
   height: 100%;
+  overflow-y: hidden;
 }
 body {
   margin: 0;

libs/components/molecules/src/lib/header/header.component.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: center;
   height: 4.5rem;
-  padding: 0 2rem 0 1rem;
+  padding: 0 2rem;
 
   @include utils.define-flex-filler();
 
@@ -89,4 +89,8 @@
   @media (max-width: 20rem) {
     padding: 0;
   }
+
+  @media (max-width: 22.5rem) {
+    padding: 0 1rem;
+  }
 }

libs/components/molecules/src/lib/landing-page-in-depth/landing-page-in-depth.component.scss

@@ -3,16 +3,17 @@
 :host {
   display: grid;
   grid-template-columns: 2fr 3fr;
-  grid-template-rows: auto auto 1fr;
-  column-gap: 2rem;
+  grid-template-rows: 0fr 0fr 1fr;
+  column-gap: 4rem;
   row-gap: 2rem;
   padding: 3.5rem 6rem;
+  max-height: 30rem;
 
   .image {
     grid-column: 1;
     grid-row: 1 / span 3;
     width: 100%;
-    height: auto;
+    height: 100%;
     align-self: center;
     border-radius: 1rem;
     box-shadow: 0.06rem 0.13rem 1rem 0.13rem #00000029;
@@ -42,4 +43,32 @@
     width: fit-content;
     height: 3rem;
   }
+
+  @media (max-width: 1400px) {
+    grid-template-columns: 1.8fr 1fr;
+    grid-template-rows: auto auto 3rem;
+    column-gap: 2rem;
+    padding: 3.5rem 2rem;
+    max-height: unset;
+
+    .title {
+      font-size: 1.5rem;
+      line-height: normal;
+    }
+  }
+
+  @media (max-width: 1280px) {
+    grid-template-columns: unset;
+    text-align: center;
+
+    .image {
+      max-height: 22rem;
+      width: auto;
+    }
+
+    .image,
+    .more-button {
+      place-self: center;
+    }
+  }
 }

libs/components/molecules/src/lib/landing-page-intro/landing-page-intro.component.scss

@@ -24,12 +24,15 @@
     grid-row: 1 / span 4;
     place-self: center;
     width: 100%;
-    height: auto;
-    max-height: 30rem;
+    min-height: 23rem;
+    max-height: 27rem;
   }
 
   .description,
   .partners {
+    font-size: 1rem;
+    line-height: 1.5rem;
+
     ::ng-deep p {
       margin: 0;
     }
@@ -87,4 +90,20 @@
       border: 1px solid #ffd6db;
     }
   }
+
+  @media (max-width: 1400px) {
+    .title {
+      font-size: 2rem;
+      line-height: normal;
+    }
+  }
+
+  @media (max-width: 1280px) {
+    grid-template-columns: unset;
+
+    .image {
+      grid-column: 1;
+      grid-row: 5 / span 1;
+    }
+  }
 }

libs/components/molecules/src/lib/metrics/metrics.component.scss

@@ -47,4 +47,14 @@
       }
     }
   }
+
+  @media (max-width: 1400px) {
+    .metrics {
+      flex-wrap: wrap;
+
+      .metric {
+        width: 31%;
+      }
+    }
+  }
 }