TRI-283: end pade move

styles/moover.scss

@@ -6,4 +6,6 @@
 @import "./moover/use";
 @import "./moover/animate";
 @import "./moover/about";
-@import "./moover/benefits";
+@import "./moover/benefits";
+@import "./moover/uses";
+@import "./moover/sore";

styles/moover/animate.scss

@@ -1,24 +1,32 @@
 .animate {
   padding: 60px 40px 49px;
   opacity: 0;
-  transform: translateX(-180px);
   background-color: var(--color-black2);
   border-radius: 30px;
   color: white;
   margin-bottom: 160px;
-}
 
-.animate .title {
-  margin-bottom: 25px;
-  max-width: 87%;
-  /*width: 90%;*/
-}
-.animate .subtitle {
-  width: 47%;
-  margin: 0 auto 23px;
-}
+  &.left {
+    transform: translateX(-180px);
+  }
 
-.animate__link {
-  color: var(--color-orange);
-  text-decoration: underline !important;
-}
+  &.right {
+    transform: translateX(180px);
+  }
+
+  &__link {
+    color: var(--color-orange);
+    text-decoration: underline !important;
+  }
+
+  .title {
+    margin-bottom: 25px;
+    max-width: 87%;
+    /*width: 90%;*/
+  }
+
+  .subtitle {
+    width: 47%;
+    margin: 0 auto 23px;
+  }
+}

styles/moover/benefits.scss

@@ -1,5 +1,5 @@
 .benefits {
-  margin-bottom: 50px;
+  margin-bottom: 132px;
 
   &__grid {
     text-align: left;

styles/moover/chatterbox.scss

@@ -99,7 +99,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    height: calc(100% - 16px);
+    height: 600px;
   }
 
   .title {

styles/moover/sore.scss

@@ -0,0 +1,27 @@
+.sore {
+  margin-bottom: 160px;
+
+  &__img {
+    margin: 0 auto 26px;
+    position: relative;
+    left: -17px;
+
+  }
+
+  .title {
+    margin-bottom: 40px;
+  }
+
+
+  .subtitle {
+    max-width: 62%;
+    margin: 0 auto -1px;
+
+  }
+
+  .h3 {
+    max-width: 47%;
+   margin: 0 auto 19px;
+
+  }
+}

styles/moover/use.scss

@@ -1,54 +1,55 @@
 .use {
   margin-bottom: 123px;
-}
 
-.use .title {
-  max-width: 80%;
-  margin-bottom: 49px;
-}
+  &__img {
+    width: 67.5%;
+    margin-left: 16px;
+    margin-bottom: 31px;
+  }
 
-.use__img {
-  width: 67.5%;
-  margin-left: 16px;
-  margin-bottom: 31px;
-}
+  &__btn {
+    margin-bottom: 11px;
+  }
 
-.use__btn {
-  margin-bottom: 11px;
-}
+  &__link {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 26px;
+    color: var(--color-grey2);
+  }
 
-.use__link {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 26px;
-  color: var(--color-grey2);
-}
+  .title {
+    max-width: 80%;
+    margin-bottom: 49px;
+  }
 
-.use.use--diff .title {
-  width: 60%;
-  margin-bottom: 60px;
-}
+  &--diff {
+    .title {
+      width: 60%;
+      margin-bottom: 60px;
+    }
 
-.use.use--diff .use__img {
-  width: 100%;
-  margin-left: 0;
-  margin-bottom: 17px;
-}
+    .use__img {
+      width: 100%;
+      margin-left: 0;
+      margin-bottom: 17px;
+    }
+  }
 
-.use.use--lett {
-  margin-bottom: 120px;
-}
+  &--lett {
+    margin-bottom: 120px;
 
-.use.use--lett .title {
-  margin-bottom: 51px;
-}
+    .title {
+      margin-bottom: 51px;
+    }
 
-.use.use--lett .use__img {
-  margin-left: -5px;
-  margin-right: -5px;
-  max-width: 110%;
-  width: 1290px;
-  
+    .use__img {
+      margin-left: -5px;
+      margin-right: -5px;
+      max-width: 110%;
+      width: 1290px;
+    }
+  }
 }
 
 

styles/moover/uses.scss

@@ -0,0 +1,28 @@
+.uses {
+  margin-bottom: 122px;
+
+  &__grid {
+    text-align: left;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    /* max-width: 101.5%; */
+    /* width: 101.5%; */
+  }
+
+
+  &__item {
+    min-height: 50px;
+    margin-bottom: 43px;
+    padding: 0 50px 0 2px;
+  }
+
+  &__icon {
+    margin-bottom: 11px;
+  }
+
+  .title {
+    max-width: 50%;
+    margin: 0 auto 60px;
+  }
+
+}