fix: landing page

src/partials/LandingHome/LandingHome.scss

@@ -31,14 +31,23 @@
 
 .mountain-1,
 .mountain-2 {
+  bottom: 0;
   animation: mountainParallax 2s ease forwards;
 }
 
 .mountain-1 img,
 .mountain-2 img {
   object-fit: cover;
-  width: 100%;
   height: 100%;
+  position: absolute;
+  bottom: 0;
+}
+.mountain-1 img{
+  left: 0;
+  right: calc(100vw - 50%);
+}
+.mountain-2 img{
+  right: 0;
 }
 
 .text-container {
@@ -50,10 +59,12 @@
   color: white;
   font-family: "Inter", sans-serif;
   font-weight: 800;
-  font-size: 20px;
+  font-size: 54px;
   z-index: 3;
   width: 100%;
-  animation: textParallax 3s ease-in-out forwards;
+  opacity: 0;
+  animation: textParallax 2s ease-in-out forwards;
+  animation-delay: 1s;
 }
 
 .mountain-1,
@@ -66,93 +77,133 @@
 @keyframes textParallax {
   0% {
     top: 70%;
-    font-size: 30px;
-  }
-  50% {
-    top: 50%;
-    font-size: 80px;
+    opacity: 0;
   }
   100% {
     top: 50%;
-    font-size: 80px;
+    opacity: 1;
   }
 }
 
 @keyframes mountainParallax {
   0% {
-    height: 65rem;
-  }
-  50% {
-    height: 55rem;
+    height: 0;
+    opacity: 0;
   }
   100% {
     height: 35rem;
+    opacity: 1;
   }
 }
 
 
 @media only screen and (min-width: 980px) and (max-width: 1100px) {
   .text-container p {
-    font-size: 70px; 
+    font-size: 54px;
+  }
+  .mountain-1 img,
+  .mountain-2 img {
+    object-fit: cover;
+    width: 620px;
+    height: 70%;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .mountain-1 img{
+    left: 0;
+    right: calc(100vw - 50%);
+  }
+  .mountain-2 img{
+    right: 0;
   }
 }
 
 @media only screen and (min-width: 815px) and (max-width: 981px) {
   .text-container p {
-    font-size: 70px;
+    font-size: 48px;
   }
   .mountain-1 img,
   .mountain-2 img {
     object-fit: cover;
-    width: 100%;
-    height: 80%;
-    position: relative;
-    top: 112px;
+    width: 580px;
+    height: 70%;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .mountain-1 img{
+    left: 0;
+    right: calc(100vw - 50%);
+  }
+  .mountain-2 img{
+    right: 0;
   }
 }
 
 @media only screen and  (min-width: 764px) and (max-width: 816px) {
-  .text-container p{
-    font-size: 70px;
+  .text-container p {
+    font-size: 44px;
   }
-
   .mountain-1 img,
   .mountain-2 img {
     object-fit: cover;
-    width: 100%;
-    height: 80%;
-    position: relative;
-    top: 112px;
+    width: 500px;
+    height: 60%;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .mountain-1 img{
+    left: 0;
+    right: calc(100vw - 50%);
+  }
+  .mountain-2 img{
+    right: 0;
   }
 }
 
 @media only screen and (min-width: 629px) and (max-width: 765px) {
   .text-container p {
-    font-size: 60px;
+    font-size: 44px;
   }
-
   .mountain-1 img,
   .mountain-2 img {
     object-fit: cover;
-    width: 100%;
-    height: 75%;
-    position: relative;
-    top: 140px;
+    width: 460px;
+    height: 70%;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .mountain-1 img{
+    left: 0;
+    right: calc(100vw - 50%);
+  }
+  .mountain-2 img{
+    right: 0;
   }
 }
 
 @media only screen and (min-width: 538px) and (max-width: 630px) {
-  .text-container p{
-    font-size: 50px;
+  .text-container p {
+    font-size: 40px;
   }
-
   .mountain-1 img,
   .mountain-2 img {
     object-fit: cover;
-    width: 100%;
-    height: 70%;
-    position: relative;
-    top: 168px;
+    width: 380px;
+    height: 60%;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .mountain-1 img{
+    left: 0;
+    right: calc(100vw - 50%);
+  }
+  .mountain-2 img{
+    right: 0;
   }
 }
 
@@ -163,37 +214,61 @@
   .mountain-1 img,
   .mountain-2 img {
     object-fit: cover;
-    width: 100%;
-    height: 70%;
-    position: relative;
-    top: 168px;
+    width: 300px;
+    height: 60%;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .mountain-1 img{
+    left: 0;
+    right: calc(100vw - 50%);
+  }
+  .mountain-2 img{
+    right: 0;
   }
 } 
 
 @media only screen and (min-width: 374px) and (max-width: 480px){
   .text-container p {
-    font-size: 40px;
+    font-size: 32px;
   }
   .mountain-1 img,
   .mountain-2 img {
     object-fit: cover;
-    width: 100%;
+    width: 260px;
     height: 50%;
-    position: relative;
-    top: 280px;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .mountain-1 img{
+    left: 0;
+    right: calc(100vw - 50%);
+  }
+  .mountain-2 img{
+    right: 0;
   }
 }
 
-@media only screen and (min-width: 320px) and (max-width: 375px) {
+@media only screen and (max-width: 373px) {
   .text-container p {
-    font-size: 30px;
+    font-size: 32px;
   }
   .mountain-1 img,
   .mountain-2 img {
     object-fit: cover;
-    width: 100%;
+    width: 220px;
     height: 50%;
-    position: relative;
-    top: 280px;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .mountain-1 img{
+    left: 0;
+    right: calc(100vw - 50%);
+  }
+  .mountain-2 img{
+    right: 0;
   }
 }