TRI-283: end 1280

static/css/moover.css

@@ -82,6 +82,12 @@ h3, .h3 {
   margin-bottom: 12px;
 }
 
+@media (max-width: 1304.98px) {
+  h3, .h3 {
+    margin-bottom: 13px;
+  }
+}
+
 h4, .h4 {
   font-size: 18px;
   line-height: 26px;
@@ -238,6 +244,13 @@ b {
   padding: 40px 5px;
 }
 
+@media (max-width: 1304.98px) {
+  .header {
+    padding-top: 37px;
+    padding-bottom: 41px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .header {
     padding-top: 19px;
@@ -284,7 +297,7 @@ b {
 
 @media (max-width: 1304.98px) {
   .header__nav {
-    max-width: 46%;
+    max-width: 46.5%;
   }
 }
 
@@ -308,7 +321,7 @@ b {
 
 @media (max-width: 1304.98px) {
   .header__btn {
-    margin-right: -8px;
+    margin-right: 0;
   }
 }
 
@@ -347,6 +360,7 @@ b {
 @media (max-width: 1304.98px) {
   .presentation {
     margin-bottom: 120px;
+    margin-bottom: 138px;
   }
 }
 
@@ -942,6 +956,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox {
+    margin-bottom: 140px;
+  }
+}
+
 .chatterbox__slider {
   max-width: 1200px;
   margin: 0 auto;
@@ -953,6 +973,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox__slider {
+    max-width: 1100px;
+  }
+}
+
 .chatterbox__slide {
   width: 335px;
   height: 615px;
@@ -972,9 +998,9 @@ b {
 
 @media (max-width: 1304.98px) {
   .chatterbox__slide {
-    width: 300px;
+    width: 308px;
-    height: 615px;
+    height: 565px;
-    background-size: 300px 615px;
+    background-size: 308px 565px;
   }
 }
 
@@ -1098,18 +1124,42 @@ b {
   margin-bottom: 60px;
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox .title {
+    margin-bottom: 39px;
+  }
+}
+
 .chatterbox .slick-next {
   right: -40px;
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox .slick-next {
+    right: -10px;
+  }
+}
+
 .chatterbox .slick-prev {
   left: -40px;
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox .slick-prev {
+    left: -10px;
+  }
+}
+
 .slick-slide:not(.slick-center) .chatterbox__slide {
   scale: 0.72;
 }
 
+@media (max-width: 1304.98px) {
+  .slick-slide:not(.slick-center) .chatterbox__slide {
+    scale: 0.69;
+  }
+}
+
 .slick-center .chatterbox__vbtn {
   opacity: 1;
   pointer-events: initial;
@@ -1209,10 +1259,22 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .use--lett {
+    margin-bottom: 123px;
+  }
+}
+
 .use--lett .title {
   margin-bottom: 51px;
 }
 
+@media (max-width: 1304.98px) {
+  .use--lett .title {
+    margin-bottom: 39px;
+  }
+}
+
 .use--lett .use__img {
   margin-left: -5px;
   margin-right: -5px;
@@ -1226,6 +1288,15 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .use--lett .use__img {
+    margin-left: 0;
+    margin-right: 0;
+    max-width: 100%;
+    width: 1120px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .use .h3 {
     max-width: 75%;
@@ -1243,6 +1314,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .diff {
+    margin-bottom: 140px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff {
     margin-bottom: 125px;
@@ -1293,6 +1370,12 @@ b {
   bottom: 0;
 }
 
+@media (max-width: 1304.98px) {
+  .diff__grid::before {
+    height: 90%;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__grid::before {
     display: none;
@@ -1319,6 +1402,12 @@ b {
   margin-right: 29px;
 }
 
+@media (max-width: 1304.98px) {
+  .diff__coll.left {
+    margin-right: 10px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__coll.left {
     margin-right: 0;
@@ -1345,6 +1434,12 @@ b {
   margin-left: 29px;
 }
 
+@media (max-width: 1304.98px) {
+  .diff__coll.right {
+    margin-left: 10px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__coll.right {
     margin-left: 0;
@@ -1372,6 +1467,12 @@ b {
   margin-bottom: 38px;
 }
 
+@media (max-width: 1304.98px) {
+  .diff__coll-title {
+    margin-bottom: 18px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__coll-title {
     margin-bottom: 19px;
@@ -1406,6 +1507,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .diff__item {
+    margin-bottom: 18px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__item {
     font-size: 18px;
@@ -1436,6 +1543,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .diff__status {
+    border-radius: 13px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__status {
     border-radius: 11px;
@@ -1493,6 +1606,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .animate {
+    margin-bottom: 141px;
+  }
+}
+
 .animate.left {
   transform: translateX(-180px);
 }
@@ -1524,6 +1643,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .animate .title {
+    max-width: 99%;
+  }
+}
+
 .animate .subtitle {
   width: 47%;
   margin: 0 auto 23px;
@@ -1537,6 +1662,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .animate .subtitle {
+    width: 54%;
+  }
+}
+
 .about {
   margin-bottom: 168px;
 }
@@ -1547,6 +1678,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .about {
+    margin-bottom: 138px;
+  }
+}
+
 .about .title {
   margin-bottom: 60px;
 }
@@ -1557,6 +1694,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .about .title {
+    margin-bottom: 39px;
+  }
+}
+
 .about__grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -1575,6 +1718,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .about__img {
+    margin-left: -10px;
+  }
+}
+
 .about__right {
   text-align: left;
   padding-top: 43px;
@@ -1588,6 +1737,13 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .about__right {
+    padding-left: 11px;
+    padding-top: 19px;
+  }
+}
+
 .about__half {
   max-width: 50%;
   float: left;
@@ -1625,6 +1781,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .benefits {
+    margin-bottom: 101px;
+  }
+}
+
 .benefits__grid {
   text-align: left;
   display: grid;
@@ -1676,6 +1838,13 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .benefits img {
+    top: 20px;
+    right: 0;
+  }
+}
+
 @media (min-width: 1720px) {
   .benefits h2 {
     margin-bottom: 10px;
@@ -1692,6 +1861,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .uses {
+    margin-bottom: 123px;
+  }
+}
+
 .uses__grid {
   text-align: left;
   display: grid;
@@ -1729,6 +1904,13 @@ b {
   margin: 0 auto 60px;
 }
 
+@media (max-width: 1304.98px) {
+  .uses .title {
+    max-width: 70%;
+    margin-bottom: 39px;
+  }
+}
+
 .sore {
   margin-bottom: 160px;
   margin-top: 1px;
@@ -1740,6 +1922,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .sore {
+    margin-bottom: 140px;
+  }
+}
+
 .sore__img {
   margin: 0 auto 26px;
   position: relative;
@@ -1752,6 +1940,14 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .sore__img {
+    left: 4px;
+    top: -9px;
+    margin-bottom: 17px;
+  }
+}
+
 .sore .title {
   margin-bottom: 40px;
 }
@@ -1775,6 +1971,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .sore .subtitle {
+    max-width: 65%;
+  }
+}
+
 .sore .h3 {
   max-width: 47%;
   margin: 0 auto 19px;
@@ -1785,3 +1987,9 @@ b {
     max-width: 38%;
   }
 }
+
+@media (max-width: 1304.98px) {
+  .sore .h3 {
+    max-width: 50%;
+  }
+}

static/css/moover/about.css

@@ -8,6 +8,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .about {
+    margin-bottom: 138px;
+  }
+}
+
 .about .title {
   margin-bottom: 60px;
 }
@@ -18,6 +24,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .about .title {
+    margin-bottom: 39px;
+  }
+}
+
 .about__grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -36,6 +48,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .about__img {
+    margin-left: -10px;
+  }
+}
+
 .about__right {
   text-align: left;
   padding-top: 43px;
@@ -49,6 +67,13 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .about__right {
+    padding-left: 11px;
+    padding-top: 19px;
+  }
+}
+
 .about__half {
   max-width: 50%;
   float: left;

static/css/moover/animate.css

@@ -15,6 +15,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .animate {
+    margin-bottom: 141px;
+  }
+}
+
 .animate.left {
   transform: translateX(-180px);
 }
@@ -46,6 +52,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .animate .title {
+    max-width: 99%;
+  }
+}
+
 .animate .subtitle {
   width: 47%;
   margin: 0 auto 23px;
@@ -58,3 +70,9 @@
     margin-bottom: 40px;
   }
 }
+
+@media (max-width: 1304.98px) {
+  .animate .subtitle {
+    width: 54%;
+  }
+}

static/css/moover/benefits.css

@@ -8,6 +8,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .benefits {
+    margin-bottom: 101px;
+  }
+}
+
 .benefits__grid {
   text-align: left;
   display: grid;
@@ -59,6 +65,13 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .benefits img {
+    top: 20px;
+    right: 0;
+  }
+}
+
 @media (min-width: 1720px) {
   .benefits h2 {
     margin-bottom: 10px;

static/css/moover/chatterbox.css

@@ -8,6 +8,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox {
+    margin-bottom: 140px;
+  }
+}
+
 .chatterbox__slider {
   max-width: 1200px;
   margin: 0 auto;
@@ -19,6 +25,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox__slider {
+    max-width: 1100px;
+  }
+}
+
 .chatterbox__slide {
   width: 335px;
   height: 615px;
@@ -38,9 +50,9 @@
 
 @media (max-width: 1304.98px) {
   .chatterbox__slide {
-    width: 300px;
+    width: 308px;
-    height: 615px;
+    height: 565px;
-    background-size: 300px 615px;
+    background-size: 308px 565px;
   }
 }
 
@@ -164,18 +176,42 @@
   margin-bottom: 60px;
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox .title {
+    margin-bottom: 39px;
+  }
+}
+
 .chatterbox .slick-next {
   right: -40px;
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox .slick-next {
+    right: -10px;
+  }
+}
+
 .chatterbox .slick-prev {
   left: -40px;
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox .slick-prev {
+    left: -10px;
+  }
+}
+
 .slick-slide:not(.slick-center) .chatterbox__slide {
   scale: 0.72;
 }
 
+@media (max-width: 1304.98px) {
+  .slick-slide:not(.slick-center) .chatterbox__slide {
+    scale: 0.69;
+  }
+}
+
 .slick-center .chatterbox__vbtn {
   opacity: 1;
   pointer-events: initial;

static/css/moover/diff.css

@@ -8,6 +8,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .diff {
+    margin-bottom: 140px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff {
     margin-bottom: 125px;
@@ -58,6 +64,12 @@
   bottom: 0;
 }
 
+@media (max-width: 1304.98px) {
+  .diff__grid::before {
+    height: 90%;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__grid::before {
     display: none;
@@ -84,6 +96,12 @@
   margin-right: 29px;
 }
 
+@media (max-width: 1304.98px) {
+  .diff__coll.left {
+    margin-right: 10px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__coll.left {
     margin-right: 0;
@@ -110,6 +128,12 @@
   margin-left: 29px;
 }
 
+@media (max-width: 1304.98px) {
+  .diff__coll.right {
+    margin-left: 10px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__coll.right {
     margin-left: 0;
@@ -137,6 +161,12 @@
   margin-bottom: 38px;
 }
 
+@media (max-width: 1304.98px) {
+  .diff__coll-title {
+    margin-bottom: 18px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__coll-title {
     margin-bottom: 19px;
@@ -171,6 +201,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .diff__item {
+    margin-bottom: 18px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__item {
     font-size: 18px;
@@ -201,6 +237,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .diff__status {
+    border-radius: 13px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .diff__status {
     border-radius: 11px;

static/css/moover/header.css

@@ -4,6 +4,13 @@
   padding: 40px 5px;
 }
 
+@media (max-width: 1304.98px) {
+  .header {
+    padding-top: 37px;
+    padding-bottom: 41px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .header {
     padding-top: 19px;
@@ -50,7 +57,7 @@
 
 @media (max-width: 1304.98px) {
   .header__nav {
-    max-width: 46%;
+    max-width: 46.5%;
   }
 }
 
@@ -74,7 +81,7 @@
 
 @media (max-width: 1304.98px) {
   .header__btn {
-    margin-right: -8px;
+    margin-right: 0;
   }
 }
 

static/css/moover/presentation.css

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

static/css/moover/root.css

@@ -82,6 +82,12 @@ h3, .h3 {
   margin-bottom: 12px;
 }
 
+@media (max-width: 1304.98px) {
+  h3, .h3 {
+    margin-bottom: 13px;
+  }
+}
+
 h4, .h4 {
   font-size: 18px;
   line-height: 26px;

static/css/moover/sore.css

@@ -9,6 +9,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .sore {
+    margin-bottom: 140px;
+  }
+}
+
 .sore__img {
   margin: 0 auto 26px;
   position: relative;
@@ -21,6 +27,14 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .sore__img {
+    left: 4px;
+    top: -9px;
+    margin-bottom: 17px;
+  }
+}
+
 .sore .title {
   margin-bottom: 40px;
 }
@@ -44,6 +58,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .sore .subtitle {
+    max-width: 65%;
+  }
+}
+
 .sore .h3 {
   max-width: 47%;
   margin: 0 auto 19px;
@@ -54,3 +74,9 @@
     max-width: 38%;
   }
 }
+
+@media (max-width: 1304.98px) {
+  .sore .h3 {
+    max-width: 50%;
+  }
+}

static/css/moover/use.css

@@ -86,10 +86,22 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .use--lett {
+    margin-bottom: 123px;
+  }
+}
+
 .use--lett .title {
   margin-bottom: 51px;
 }
 
+@media (max-width: 1304.98px) {
+  .use--lett .title {
+    margin-bottom: 39px;
+  }
+}
+
 .use--lett .use__img {
   margin-left: -5px;
   margin-right: -5px;
@@ -103,6 +115,15 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .use--lett .use__img {
+    margin-left: 0;
+    margin-right: 0;
+    max-width: 100%;
+    width: 1120px;
+  }
+}
+
 @media (max-width: 991.98px) {
   .use .h3 {
     max-width: 75%;

static/css/moover/uses.css

@@ -8,6 +8,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .uses {
+    margin-bottom: 123px;
+  }
+}
+
 .uses__grid {
   text-align: left;
   display: grid;
@@ -44,3 +50,10 @@
   max-width: 50%;
   margin: 0 auto 60px;
 }
+
+@media (max-width: 1304.98px) {
+  .uses .title {
+    max-width: 70%;
+    margin-bottom: 39px;
+  }
+}

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;
+      width: 308px;
-      height: 615px;
+      height: 565px;
-      background-size: 300px 615px;
+      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 {
+.slick-center {
-  opacity: 1;
+
-  pointer-events: initial;
+  .chatterbox__vbtn {
-  z-index: 1;
+    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;
+    }
   }
 
 }

templates/pages/p_mover_landing_page.html

@@ -171,8 +171,11 @@
   <section class="use">
     <div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
     <picture class="img">
-      <source srcset="{% static "img/webp/use.webp" %}" media="(min-width: 991.98px)"/>
+      <source srcset="{% static "img/png/use-1720.png" %}" media="(min-width: 1720px)"/>
-      <img src="{% static "img/png/use-md.png" %}" alt="list users" class="use__img">
+      <source srcset="{% static "img/png/use-1280.png" %}" media="(min-width: 1280px)"/>
+      <source srcset="{% static "img/png/use-1120.png" %}" media="(min-width: 1120px)"/>
+      <source srcset="{% static "img/png/use-640.png" %}" media="(min-width: 768px)"/>
+      <img src="{% static "img/png/use-328.png" %}" alt="list users" class="use__img">
     </picture>
     <div class="h3">
       {% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
@@ -241,112 +244,112 @@
   <section class="chatterbox">
     <div class="title">{% translate "Что о нас говорят люди" %}</div>
     <div class="chatterbox__slider slick-slider">
-      {#      {% for media_item in page.get_media_items %}#}
+            {% for media_item in page.get_media_items %}
-      {#        <div class="slick-slide">#}
+              <div class="slick-slide">
-      {#          <div class="chatterbox__slide">#}
+                <div class="chatterbox__slide">
-      {#            <div class="chatterbox__vbtn"></div>#}
+                  <div class="chatterbox__vbtn"></div>
-      {#            <div class="chatterbox__wrap">#}
+                  <div class="chatterbox__wrap">
-      {#              <div class="chatterbox__vbox">#}
+                    <div class="chatterbox__vbox">
-      {#                <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">#}
+                      <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
-      {#                <video#}
+                      <video
-      {#                    data-src="{{ MEDIA_URL }}{{ media_item.video }}"#}
+                          data-src="{{ MEDIA_URL }}{{ media_item.video }}"
-      {#                    poster="{{ MEDIA_URL }}{{ media_item.picture }}"#}
+                          poster="{{ MEDIA_URL }}{{ media_item.picture }}"
-      {#                    controls#}
+                          controls
-      {#                    autoplay#}
+                          autoplay
-      {#                ></video>#}
+                      ></video>
-      {#              </div>#}
+                    </div>
-      {#            </div>#}
+                  </div>
-      {#          </div>#}
+                </div>
-      {##}
-      {#        </div>#}
-      {#      {% endfor %}#}
-      <div class="slick-slide">
-        <div class="chatterbox__slide">
-          <div class="chatterbox__vbtn"></div>
-          <div class="chatterbox__wrap">
-            <div class="chatterbox__vbox">
-              <img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
-              <video
-                  data-src="/media/media_items/video/1.mp4"
-                  poster="/media/media_items/image/ava1.jpg"
-                  controls
-                  autoplay
-              ></video>
-            </div>
-          </div>
-        </div>
 
-      </div>
+              </div>
-      <div class="slick-slide">
+            {% endfor %}
-        <div class="chatterbox__slide">
+{#      <div class="slick-slide">#}
-          <div class="chatterbox__vbtn"></div>
+{#        <div class="chatterbox__slide">#}
-          <div class="chatterbox__wrap">
+{#          <div class="chatterbox__vbtn"></div>#}
-            <div class="chatterbox__vbox">
+{#          <div class="chatterbox__wrap">#}
-              <img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
+{#            <div class="chatterbox__vbox">#}
-              <video
+{#              <img src="/ava1.jpg" alt="user" class="chatterbox__poster">#}
-                  data-src="/media/media_items/video/2.mp4"
+{#              <video#}
-                  poster="/media/media_items/image/ava2.jpg"
+{#                  data-src="/media/media_items/video/1.mp4"#}
-                  controls
+{#                  poster="/ava1.jpg"#}
-                  autoplay
+{#                  controls#}
-              ></video>
+{#                  autoplay#}
-            </div>
+{#              ></video>#}
-          </div>
+{#            </div>#}
-        </div>
+{#          </div>#}
-      </div>
+{#        </div>#}
-      <div class="slick-slide">
+{##}
-        <div class="chatterbox__slide">
+{#      </div>#}
-          <div class="chatterbox__vbtn"></div>
+{#      <div class="slick-slide">#}
-          <div class="chatterbox__wrap">
+{#        <div class="chatterbox__slide">#}
-            <div class="chatterbox__vbox">
+{#          <div class="chatterbox__vbtn"></div>#}
-              <img src="/media/media_items/image/ava3.jpg" alt="user" class="chatterbox__poster">
+{#          <div class="chatterbox__wrap">#}
-              <video
+{#            <div class="chatterbox__vbox">#}
-                  data-src="/media/media_items/video/3.mp4"
+{#              <img src="/ava2.jpg" alt="user" class="chatterbox__poster">#}
-                  poster="/media/media_items/image/ava3.jpg"
+{#              <video#}
-                  controls
+{#                  data-src="/media/media_items/video/2.mp4"#}
-                  autoplay
+{#                  poster="/ava2.jpg"#}
-              >
+{#                  controls#}
-              </video>
+{#                  autoplay#}
-            </div>
+{#              ></video>#}
-          </div>
+{#            </div>#}
-        </div>
+{#          </div>#}
-
+{#        </div>#}
-      </div>
+{#      </div>#}
-      <div class="slick-slide">
+{#      <div class="slick-slide">#}
-        <div class="chatterbox__slide">
+{#        <div class="chatterbox__slide">#}
-          <div class="chatterbox__vbtn"></div>
+{#          <div class="chatterbox__vbtn"></div>#}
-          <div class="chatterbox__wrap">
+{#          <div class="chatterbox__wrap">#}
-            <div class="chatterbox__vbox">
+{#            <div class="chatterbox__vbox">#}
-              <img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
+{#              <img src="/ava3.jpg" alt="user" class="chatterbox__poster">#}
-              <video
+{#              <video#}
-                  data-src="/media/media_items/video/4.mp4"
+{#                  data-src="/media/media_items/video/3.mp4"#}
-                  poster="/media/media_items/image/ava1.jpg"
+{#                  poster="/ava3.jpg"#}
-                  controls
+{#                  controls#}
-                  autoplay
+{#                  autoplay#}
-              >
+{#              >#}
-              </video>
+{#              </video>#}
-            </div>
+{#            </div>#}
-          </div>
+{#          </div>#}
-        </div>
+{#        </div>#}
-      </div>
+{##}
-      <div class="slick-slide">
+{#      </div>#}
-        <div class="chatterbox__slide">
+{#      <div class="slick-slide">#}
-          <div class="chatterbox__vbtn"></div>
+{#        <div class="chatterbox__slide">#}
-          <div class="chatterbox__wrap">
+{#          <div class="chatterbox__vbtn"></div>#}
-            <div class="chatterbox__vbox">
+{#          <div class="chatterbox__wrap">#}
-              <img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
+{#            <div class="chatterbox__vbox">#}
-              <video
+{#              <img src="/ava1.jpg" alt="user" class="chatterbox__poster">#}
-                  data-src="/media/media_items/video/5.mp4"
+{#              <video#}
-                  poster="/media/media_items/image/ava2.jpg"
+{#                  data-src="/media/media_items/video/4.mp4"#}
-                  controls
+{#                  poster="/ava1.jpg"#}
-                  autoplay
+{#                  controls#}
-              >
+{#                  autoplay#}
-              </video>
+{#              >#}
-            </div>
+{#              </video>#}
-          </div>
+{#            </div>#}
-
+{#          </div>#}
-
+{#        </div>#}
-        </div>
+{#      </div>#}
-      </div>
+{#      <div class="slick-slide">#}
+{#        <div class="chatterbox__slide">#}
+{#          <div class="chatterbox__vbtn"></div>#}
+{#          <div class="chatterbox__wrap">#}
+{#            <div class="chatterbox__vbox">#}
+{#              <img src="/ava2.jpg" alt="user" class="chatterbox__poster">#}
+{#              <video#}
+{#                  data-src="/media/media_items/video/5.mp4"#}
+{#                  poster="/ava2.jpg"#}
+{#                  controls#}
+{#                  autoplay#}
+{#              >#}
+{#              </video>#}
+{#            </div>#}
+{#          </div>#}
+{##}
+{##}
+{#        </div>#}
+{#      </div>#}
     </div>
     <script type="text/javascript">
       $(document).ready(function () {
@@ -389,8 +392,11 @@
   <section class="use use--lett" id="rewiews">
     <div class="title">{% translate "Что о нас пишут люди" %}</div>
     <picture>
-      <source srcset="{% static "img/png/use-letters-1920.png" %}" media="(min-width: 1720px)"/>
+      <source srcset="{% static "img/png/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
-      <img src="{% static "img/png/use-letterss.png" %}" alt="list letters" class="use__img">
+      <source srcset="{% static "img/png/use-letters-1280.png" %}" media="(min-width: 1280px)"/>
+      <source srcset="{% static "img/png/use-letters-1120.png" %}" media="(min-width: 1120px)"/>
+      <source srcset="{% static "img/png/use-letters-640.png" %}" media="(min-width: 768px)"/>
+      <img src="{% static "img/png/use-letters-328.png" %}" alt="list letters" class="use__img">
     </picture>
   </section>
   <section class="animate left">
@@ -432,8 +438,11 @@
     <div class="title">{% translate "О сервисе Trip With Bonus" %}</div>
     <div class="about__grid">
       <picture class="about__img">
-        <source srcset="{% static "img/png/about-1920.png" %}" media="(min-width: 1720px)"/>
+        <source srcset="{% static "img/png/about-1720.png" %}" media="(min-width: 1720px)"/>
-        <img src="{% static "/img/png/about.png" %}" alt="about">
+        <source srcset="{% static "img/png/about-1280.png" %}" media="(min-width: 1304px)"/>
+        <source srcset="{% static "img/png/about-1120.png" %}" media="(min-width: 1280px)"/>
+        <source srcset="{% static "img/png/about-640.png" %}" media="(min-width: 768px)"/>
+        <img src="{% static "/img/png/about-328.png" %}" alt="about">
       </picture>
       {#      <img src="{% static "/img/png/about.png" %}" alt="about" class="about__img">#}
       <div class="about__right">
@@ -464,8 +473,11 @@
       </div>
       <div class="benefits__second">
         <picture>
-          <source srcset="{% static "img/png/benefits-1920.png" %}" media="(min-width: 1720px)"/>
+          <source srcset="{% static "img/png/benefits-1720.png" %}" media="(min-width: 1720px)"/>
-          <img src="{% static "/img/png/benefits.png" %}" alt="benefits">
+          <source srcset="{% static "img/png/benefits-1280.png" %}" media="(min-width: 1280px)"/>
+          <source srcset="{% static "img/png/benefits-1120.png" %}" media="(min-width: 1120px)"/>
+          <source srcset="{% static "img/png/benefits-640.png" %}" media="(min-width: 768px)"/>
+          <img src="{% static "/img/png/benefits-328.png" %}" alt="benefits">
         </picture>
       </div>
       <div class="benefits__third">
@@ -543,8 +555,11 @@
       {% translate "Мы&nbsp;знаем, каково это без конца и&nbsp;края закидывать сообщения в&nbsp;чаты и&nbsp;группы в&nbsp;социальных сетях, в&nbsp;надежде найти человека, который едет или летит в&nbsp;нужном направлении, чтобы передать посылоку своим родным или близким. Очень часто ещё и&nbsp;стоимость пересылки в&nbsp;обычных почтовых сервисах выше стоимости самой посылки." %}
     </div>
     <picture>
-      <source srcset="{% static "img/png/sore-1920.png" %}" media="(min-width: 1720px)"/>
+      <source srcset="{% static "img/png/sore-1720.png" %}" media="(min-width: 1720px)"/>
-      <img src="{% static "/img/png/sore.png" %}" alt="sore image" class="sore__img">
+      <source srcset="{% static "img/png/sore-1280.png" %}" media="(min-width: 1280px)"/>
+      <source srcset="{% static "img/png/sore-1120.png" %}" media="(min-width: 1120px)"/>
+      <source srcset="{% static "img/png/sore-640.png" %}" media="(min-width: 768px)"/>
+      <img src="{% static "/img/png/sore-328.png" %}" alt="sore image" class="sore__img">
     </picture>
     <div class="h3">
       {% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %}