TRI-283: end 1280

styles/moover/about.scss

@@ -5,11 +5,19 @@
      margin-bottom: 188px;
   }
 
+      @media (max-width: 1304.98px) {
+          margin-bottom: 138px;
+    }
+
   .title {
     margin-bottom: 60px;
 
     @media (min-width: 1720px) {
       margin-bottom: 49px;
+    }
+
+        @media (max-width: 1304.98px) {
+          margin-bottom: 39px;
     }
   }
 
@@ -29,6 +37,10 @@
 
     @media (min-width: 1720px) {
       margin-top: 19px;
+    }
+
+        @media (max-width: 1304.98px) {
+          margin-left: -10px;
     }
   }
 
@@ -40,6 +52,11 @@
     @media (min-width: 1720px) {
       padding-top: 90px;
       padding-left: 21px;
+    }
+
+        @media (max-width: 1304.98px) {
+          padding-left: 11px;
+          padding-top: 19px;
     }
   }
 

styles/moover/animate.scss

@@ -12,6 +12,10 @@
     margin-bottom: 180px;
   }
 
+  @media (max-width: 1304.98px) {
+    margin-bottom: 141px;
+  }
+
   &.left {
     transform: translateX(-180px);
   }
@@ -39,6 +43,10 @@
     @media (min-width: 1720px) {
       margin-bottom: 40px;
     }
+
+    @media (max-width: 1304.98px) {
+      max-width: 99%;
+    }
   }
 
   .subtitle {
@@ -50,5 +58,9 @@
       letter-spacing: 0.1px;
       margin-bottom: 40px;
     }
+
+    @media (max-width: 1304.98px) {
+      width: 54%;
+    }
   }
 }

styles/moover/benefits.scss

@@ -5,6 +5,10 @@
     margin-bottom: 147px;
   }
 
+      @media (max-width: 1304.98px) {
+          margin-bottom: 101px;
+    }
+
   &__grid {
     text-align: left;
     display: grid;
@@ -45,6 +49,11 @@
 
     @media (min-width: 1720px) {
       top: -33px;
+    }
+
+        @media (max-width: 1304.98px) {
+          top: 20px;
+          right: 0;
     }
   }
 

styles/moover/chatterbox.scss

@@ -5,6 +5,10 @@
     margin-bottom: 180px;
   }
 
+    @media (max-width: 1304.98px) {
+      margin-bottom: 140px;
+    }
+
   &__slider {
     max-width: 1200px;
     margin: 0 auto;
@@ -12,6 +16,10 @@
     @media (min-width: 1720px) {
       max-width: 1640px;
     }
+
+    @media (max-width: 1304.98px) {
+      max-width: 1100px;
+    }
   }
 
   &__slide {
@@ -29,9 +37,9 @@
     }
 
     @media (max-width: 1304.98px) {
-      width: 300px;
-      height: 615px;
-      background-size: 300px 615px;
+      width: 308px;
+      height: 565px;
+      background-size: 308px 565px;
     }
 
     &.loaded {
@@ -146,28 +154,52 @@
 
   .title {
     margin-bottom: 60px;
+
+    @media (max-width: 1304.98px) {
+      margin-bottom: 39px;
+    }
   }
 
   .slick-next {
     right: -40px;
+
+    @media (max-width: 1304.98px) {
+      right: -10px;
+    }
   }
 
   .slick-prev {
     left: -40px;
+
+    @media (max-width: 1304.98px) {
+      left: -10px;
+    }
   }
 }
 
 .slick-slide:not(.slick-center) .chatterbox__slide {
   scale: 0.72;
+
+  @media (max-width: 1304.98px) {
+    scale: 0.69;
+  }
 }
 
-.slick-center .chatterbox__vbtn {
-  opacity: 1;
-  pointer-events: initial;
-  z-index: 1;
-}
+.slick-center {
+
+  .chatterbox__vbtn {
+    opacity: 1;
+    pointer-events: initial;
+    z-index: 1;
+  }
+
+  .chatterbox__vbox video {
+    pointer-events: initial;
+    cursor: pointer;
+  }
+
+  .chatterbox__slide {
+
+  }
 
-.slick-center .chatterbox__vbox video {
-  pointer-events: initial;
-  cursor: pointer;
 }

styles/moover/diff.scss

@@ -5,6 +5,10 @@
     margin-bottom: 172px;
   }
 
+  @media (max-width: 1304.98px) {
+    margin-bottom: 140px;
+  }
+
   @media (max-width: 991.98px) {
     margin-bottom: 125px;
   }
@@ -45,6 +49,10 @@
       transform: translateX(-50%);
       bottom: 0;
 
+      @media (max-width: 1304.98px) {
+        height: 90%;
+      }
+
       @media (max-width: 991.98px) {
         display: none;
       }
@@ -65,6 +73,10 @@
     &.left {
       margin-right: 29px;
 
+      @media (max-width: 1304.98px) {
+        margin-right: 10px;
+      }
+
       @media (max-width: 991.98px) {
         margin-right: 0;
       }
@@ -85,6 +97,10 @@
     &.right {
       margin-left: 29px;
 
+      @media (max-width: 1304.98px) {
+        margin-left: 10px;
+      }
+
       @media (max-width: 991.98px) {
         margin-left: 0;
         display: none;
@@ -108,6 +124,10 @@
   &__coll-title {
     margin-bottom: 38px;
 
+    @media (max-width: 1304.98px) {
+      margin-bottom: 18px;
+    }
+
     @media (max-width: 991.98px) {
       margin-bottom: 19px;
     }
@@ -138,6 +158,10 @@
       margin-bottom: 38px;
     }
 
+    @media (max-width: 1304.98px) {
+      margin-bottom: 18px;
+    }
+
     @media (max-width: 991.98px) {
       font-size: 18px;
       margin-bottom: 25px;
@@ -168,6 +192,10 @@
       border-radius: 12px;
     }
 
+    @media (max-width: 1304.98px) {
+      border-radius: 13px;
+    }
+
     @media (max-width: 991.98px) {
       border-radius: 11px;
     }

styles/moover/header.scss

@@ -3,6 +3,11 @@
   position: relative;
   padding: 40px 5px;
 
+      @media (max-width: 1304.98px) {
+        padding-top: 37px;
+        padding-bottom: 41px;
+    }
+
   @media (max-width: 991.98px) {
     padding-top: 19px;
     padding-bottom: 19px;
@@ -43,7 +48,7 @@
     }
 
     @media (max-width: 1304.98px) {
-      max-width: 46%;
+      max-width: 46.5%;
     }
     //@media (max-width: 991.98px) {
     //}
@@ -65,7 +70,7 @@
     }
 
     @media (max-width: 1304.98px) {
-      margin-right: -8px;
+      margin-right: 0;
     }
 
     @media (max-width: 991.98px) {

styles/moover/presentation.scss

@@ -9,6 +9,7 @@
 
   @media (max-width: 1304.98px) {
     margin-bottom: 120px;
+    margin-bottom: 138px;
   }
 
   @media (max-width: 991.98px) {

styles/moover/root.scss

@@ -83,6 +83,10 @@ h3, .h3 {
   font-size: 20px;
   line-height: 28px;
   margin-bottom: 12px;
+
+  @media (max-width: 1304.98px) {
+    margin-bottom: 13px;
+}
 }
 
 h4, .h4 {

styles/moover/sore.scss

@@ -6,6 +6,10 @@
     margin-bottom: 178px;
   }
 
+  @media (max-width: 1304.98px) {
+    margin-bottom: 140px;
+  }
+
   &__img {
     margin: 0 auto 26px;
     position: relative;
@@ -14,6 +18,12 @@
     @media (min-width: 1720px) {
       margin-bottom: 46px;
     }
+
+    @media (max-width: 1304.98px) {
+      left: 4px;
+      top: -9px;
+      margin-bottom: 17px;
+    }
   }
 
   .title {
@@ -34,6 +44,10 @@
       max-width: 60%;
       margin-bottom: 5px;
     }
+
+    @media (max-width: 1304.98px) {
+      max-width: 65%;
+    }
   }
 
   .h3 {
@@ -43,5 +57,9 @@
     @media (min-width: 1720px) {
       max-width: 38%;
     }
+
+    @media (max-width: 1304.98px) {
+      max-width: 50%;
+    }
   }
 }

styles/moover/use.scss

@@ -66,9 +66,17 @@
       margin-bottom: 135px;
     }
 
+        @media (max-width: 1304.98px) {
+          margin-bottom: 123px;
+    }
+
 
     .title {
       margin-bottom: 51px;
+
+        @media (max-width: 1304.98px) {
+          margin-bottom: 39px;
+    }
     }
 
     .use__img {
@@ -81,6 +89,13 @@
         width: initial;
       }
 
+        @media (max-width: 1304.98px) {
+          margin-left: 0;
+          margin-right: 0;
+          max-width: 100%;
+          width: 1120px;
+    }
+
     }
   }
 

styles/moover/uses.scss

@@ -5,6 +5,10 @@
     margin-bottom: 136px;
   }
 
+      @media (max-width: 1304.98px) {
+          margin-bottom: 123px;
+    }
+
   &__grid {
     text-align: left;
     display: grid;
@@ -40,6 +44,11 @@
   .title {
     max-width: 50%;
     margin: 0 auto 60px;
+
+        @media (max-width: 1304.98px) {
+          max-width: 70%;
+          margin-bottom: 39px;
+    }
   }
 
 }