TRI-283: end header + start adaptive 1400>

static/css/moover.css

@@ -2,7 +2,6 @@
   margin: 0 auto;
   width: 1280px;
   position: relative;
-  min-height: 695px;
 }
 
 @media (min-width: 1720px) {
@@ -11,11 +10,19 @@
   }
 }
 
-/*@media (max-width: 1019.98px) {*/
+@media (max-width: 1304.98px) {
-/*  .container {*/
+  .container {
-/*    width: 720px*/
+    width: 1120px;
-/*  }*/
+    max-width: 88vw;
-/*}*/
+  }
+}
+
+@media (max-width: 991.98px) {
+  .container {
+    width: 640px;
+  }
+}
+
 /*@media (max-width: 767.98px) {*/
 /*  .container {*/
 /*    margin: 0 15px;*/
@@ -36,6 +43,10 @@
   color: var(--color-black2);
 }
 
+body {
+  overflow-x: hidden;
+}
+
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
 }
@@ -128,6 +139,19 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .title {
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .title {
+    font-size: 32px;
+    line-height: 38.73px;
+  }
+}
+
 .subtitle {
   margin-bottom: 81px;
   line-height: 22px;
@@ -140,12 +164,18 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .subtitle {
+    margin-bottom: 71px;
+  }
+}
+
 .hide {
   display: none;
 }
 
 .hide__xxl {
-  display: block;
+  display: initial;
 }
 
 @media (min-width: 1720px) {
@@ -154,6 +184,16 @@ b {
   }
 }
 
+.hide__md {
+  display: initial;
+}
+
+@media (max-width: 991.98px) {
+  .hide__md {
+    display: none;
+  }
+}
+
 .show__xxl {
   display: none;
 }
@@ -164,17 +204,136 @@ b {
   }
 }
 
-@media (min-width: 1440px) {
+.show__md {
-  .is-container.wrapper_main {
+  display: none;
-    max-width: initial;
+}
+
+@media (max-width: 991.98px) {
+  .show__md {
+    display: initial;
   }
+}
+
+@media (min-width: 1440px) {
   .br--xxl {
     display: none;
   }
 }
 
+@media (max-width: 991.98px) {
+  .br--md {
+    display: none;
+  }
+}
+
+@media (min-width: 1440px) {
+  .is-container.wrapper_main {
+    max-width: initial;
+  }
+}
+
+.header {
+  margin-top: 0;
+  position: relative;
+  padding: 40px 5px;
+}
+
+@media (max-width: 991.98px) {
+  .header {
+    padding-top: 19px;
+    padding-bottom: 19px;
+  }
+}
+
+.header__grid, .header__list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header__logo {
+  width: 48px;
+  height: 48px;
+  position: relative;
+  left: 5px;
+}
+
+@media (max-width: 1304.98px) {
+  .header__logo {
+    left: 14px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .header__logo {
+    left: 0;
+  }
+}
+
+.header__nav {
+  flex-grow: 1;
+  max-width: 41%;
+  margin-left: auto;
+}
+
+@media (min-width: 1720px) {
+  .header__nav {
+    max-width: 34%;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .header__nav {
+    max-width: 46%;
+  }
+}
+
+.header__link {
+  color: var(--color-black2);
+  text-decoration: none;
+}
+
+.header__btn {
+  padding: 8px 0 6px;
+  font-size: 16px;
+  margin-left: 61px;
+  margin-right: -3px;
+}
+
+@media (min-width: 1720px) {
+  .header__btn {
+    margin-left: 81px;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .header__btn {
+    margin-right: -8px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .header__btn {
+    display: none;
+  }
+}
+
+.header .dropdown {
+  left: -4px;
+}
+
+.header .dropdown-content {
+  right: 0;
+  height: initial;
+}
+
+.header .dropdown img {
+  width: 25px;
+  height: 25px;
+}
+
 .presentation {
-  margin: 20px -65px 140px;
+  margin: 12px -65px 140px;
 }
 
 @media (min-width: 1720px) {
@@ -185,6 +344,18 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .presentation {
+    margin-bottom: 120px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .presentation {
+    margin-bottom: 105px;
+  }
+}
+
 .presentation__top {
   position: relative;
   min-height: 270px;
@@ -205,19 +376,65 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .presentation__top {
+    background-size: 16%, 20%, 9.5%, 10.1%;
+    background-position: top -2.8% left 6.5%, top -19% right 3.5%, bottom 32% left 23%, bottom 29% right 22.6%;
+    margin-bottom: 96px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .presentation__top {
+    background-size: 14.5%, 17%, 8.3%, 9.1%;
+    background-position: top 9% left 7%, top 5% right 6%, bottom 51% left 14.8%, bottom 47.5% right 13.8%;
+    padding-top: 31px;
+    margin-bottom: 76px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .presentation__bottom .subtitle {
+    max-width: 40%;
+    margin: 0 auto 30px;
+  }
+}
+
 .presentation__title {
   margin-bottom: 23px;
 }
 
+@media (max-width: 991.98px) {
+  .presentation__title {
+    max-width: 75%;
+    margin: 0 auto 19px;
+  }
+}
+
 .presentation__subtitle {
   margin-bottom: 41px;
   font-weight: 600;
 }
 
+@media (max-width: 991.98px) {
+  .presentation__subtitle {
+    max-width: 55%;
+    margin: 0 auto 40px;
+    font-size: 16px;
+  }
+}
+
 .presentation__btn {
   margin-bottom: 40px;
 }
 
+@media (max-width: 991.98px) {
+  .presentation__btn {
+    padding-left: 82px;
+    padding-right: 82px;
+  }
+}
+
 .presentation__next {
   font-weight: 500;
   line-height: 22px;
@@ -242,6 +459,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .presentation__cards {
+    max-width: 1140px;
+  }
+}
+
 .presentation__bottom .presentation__title {
   margin-bottom: 13px;
 }
@@ -276,9 +499,10 @@ b {
   position: relative;
 }
 
-.cards__img:hover {
+@media (max-width: 991.98px) {
-  scale: 1.05;
+  .cards__item {
-  transition: scale 0.15s linear;
+    max-width: 270px;
+  }
 }
 
 .cards__img {
@@ -292,6 +516,17 @@ b {
   }
 }
 
+@media (max-width: 991.98px) {
+  .cards__img {
+    margin-bottom: 8px;
+  }
+}
+
+.cards__img:hover {
+  scale: 1.05;
+  transition: scale 0.15s linear;
+}
+
 .cards__desc {
   font-weight: 500;
   line-height: 22px;
@@ -306,6 +541,21 @@ b {
   }
 }
 
+@media (max-width: 1279.98px) {
+  .cards__desc {
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-bottom: 3px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .cards__desc {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
 .cards__desc a {
   color: var(--color-orange);
 }
@@ -326,6 +576,49 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .cards__arrow {
+    top: -8%;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .cards__arrow {
+    display: none;
+  }
+}
+
+.cards .slick-list {
+  overflow: visible;
+}
+
+.slick-dots {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: 1rem 0;
+  list-style-type: none;
+}
+
+.slick-dots li {
+  margin: 0 0.25rem;
+}
+
+.slick-dots button {
+  display: block;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: none;
+  border-radius: 100%;
+  background-color: #D9D9D9;
+  text-indent: -9999px;
+}
+
+.slick-dots li.slick-active button {
+  background-color: var(--color-orange);
+}
+
 .easy {
   margin-bottom: 162px;
 }
@@ -336,6 +629,18 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy {
+    margin-bottom: 142px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy {
+    margin-bottom: 121px;
+  }
+}
+
 .easy .title {
   max-width: 55%;
   margin-bottom: 21px;
@@ -348,6 +653,12 @@ b {
   }
 }
 
+@media (max-width: 991.98px) {
+  .easy .title {
+    max-width: 75%;
+  }
+}
+
 .easy .subtitle {
   margin-bottom: 41px;
 }
@@ -377,6 +688,21 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy__grid {
+    grid-column-gap: 69px;
+    grid-template-rows: repeat(2, minmax(172px, auto));
+    margin-bottom: 41px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy__grid {
+    display: block;
+    margin-bottom: 40px;
+  }
+}
+
 .easy__item {
   border-radius: 30px;
   background-color: var(--color-grey);
@@ -400,6 +726,20 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy__item--fir {
+    margin-right: 13px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--fir {
+    padding-top: 17px;
+    margin-right: 0;
+    margin-bottom: 43px;
+  }
+}
+
 .easy__item--fir p {
   width: 93%;
   margin-bottom: 29px;
@@ -412,24 +752,29 @@ b {
   }
 }
 
-.easy__item--thr {
-  grid-area: c;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .easy__item--sec {
   grid-area: b;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--sec {
+    padding-top: 35px;
+    padding-bottom: 37px;
+    margin-bottom: 39px;
+  }
 }
 
 .easy__item--sec img {
   margin-bottom: -10px;
   margin-right: -5px;
+  max-width: 50.1%;
 }
 
 @media (min-width: 1720px) {
@@ -438,13 +783,78 @@ b {
   }
 }
 
-.easy__item--thr img {
+@media (max-width: 1304.98px) {
+  .easy__item--sec img {
+    max-width: 43.1%;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--sec img {
+    margin-right: 0;
+    margin-bottom: 0;
+  }
+}
+
+.easy__item--sec p {
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.easy__item--thr {
+  grid-area: c;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--thr {
+    padding-top: 42px;
+    padding-bottom: 46px;
+  }
+}
+
+.easy__item--thr .img {
   margin-bottom: -10px;
   margin-right: 24px;
+  max-width: 80%;
+}
+
+@media (max-width: 1279.98px) {
+  .easy__item--thr .img {
+    max-width: 35%;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .easy__item--thr .img {
+    margin-right: 2px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--thr .img {
+    margin-right: 0;
+    max-width: 34%;
+  }
 }
 
 .easy__item--thr p {
   max-width: 50%;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--thr p {
+    max-width: 60%;
+  }
 }
 
 .easy__arrow {
@@ -461,6 +871,18 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy__arrow {
+    scale: 0.8;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy__arrow {
+    display: none;
+  }
+}
+
 .easy__arrow--fir {
   top: 46%;
   right: 101%;
@@ -473,6 +895,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy__arrow--fir {
+    top: 48%;
+  }
+}
+
 .easy__arrow--sec {
   top: 117%;
   left: 30%;
@@ -486,17 +914,22 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy__arrow--sec {
+    left: 38%;
+  }
+}
+
 .easy__btn {
   margin-top: -21px;
 }
 
-.easy__item--sec p,
+@media (max-width: 991.98px) {
-.easy__item--thr p,
+  .easy__btn {
-.easy__item--sec,
+    margin-top: -26px;
-.easy__item--thr {
+    padding-left: 54px;
-  margin-bottom: 0;
+    padding-right: 54px;
-  padding-top: 0;
+  }
-  padding-bottom: 0;
 }
 
 .chatterbox {
@@ -537,6 +970,14 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox__slide {
+    width: 300px;
+    height: 615px;
+    background-size: 300px 615px;
+  }
+}
+
 .chatterbox__slide.loaded video {
   opacity: 1;
 }
@@ -647,6 +1088,12 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox__vbox {
+    height: 530px;
+  }
+}
+
 .chatterbox .title {
   margin-bottom: 60px;
 }
@@ -684,6 +1131,18 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .use {
+    margin-bottom: 145px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .use {
+    margin-bottom: 121px;
+  }
+}
+
 .use__img {
   width: 67.5%;
   margin-left: 16px;
@@ -694,6 +1153,21 @@ b {
   .use__img {
     width: 50.2%;
     margin-left: 27px;
+    margin-bottom: 35px;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .use__img {
+    width: 77%;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .use__img {
+    margin-left: 0;
+    width: 100%;
+    margin-bottom: 40px;
   }
 }
 
@@ -719,13 +1193,19 @@ b {
   }
 }
 
+@media (max-width: 991.98px) {
+  .use .title {
+    margin-bottom: 38px;
+  }
+}
+
 .use--lett {
   margin-bottom: 120px;
 }
 
 @media (min-width: 1720px) {
   .use--lett {
-    margin-bottom: 140px;
+    margin-bottom: 135px;
   }
 }
 
@@ -746,8 +1226,15 @@ b {
   }
 }
 
+@media (max-width: 991.98px) {
+  .use .h3 {
+    max-width: 75%;
+    margin: 0 auto 22px;
+  }
+}
+
 .diff {
-  margin-bottom: 166px;
+  margin-bottom: 168px;
 }
 
 @media (min-width: 1720px) {
@@ -756,6 +1243,12 @@ b {
   }
 }
 
+@media (max-width: 991.98px) {
+  .diff {
+    margin-bottom: 125px;
+  }
+}
+
 .diff .title {
   width: 60%;
   margin-bottom: 65px;
@@ -768,6 +1261,20 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .diff .title {
+    width: 73%;
+    margin-bottom: 40px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .diff .title {
+    width: 90%;
+    margin-bottom: 40px;
+  }
+}
+
 .diff__grid {
   display: flex;
   position: relative;
@@ -786,14 +1293,38 @@ b {
   bottom: 0;
 }
 
+@media (max-width: 991.98px) {
+  .diff__grid::before {
+    display: none;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .diff__grid {
+    display: block;
+  }
+}
+
 .diff__coll {
   width: 50%;
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll {
+    width: 100%;
+  }
+}
+
 .diff__coll.left {
   margin-right: 29px;
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll.left {
+    margin-right: 0;
+  }
+}
+
 .diff__coll.left .diff__coll-title {
   padding-left: 39px;
 }
@@ -804,10 +1335,23 @@ b {
   }
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll.left .diff__coll-title {
+    padding-left: 0;
+  }
+}
+
 .diff__coll.right {
   margin-left: 29px;
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll.right {
+    margin-left: 0;
+    display: none;
+  }
+}
+
 .diff__coll.right .diff__coll-title {
   padding-right: 39px;
 }
@@ -818,10 +1362,22 @@ b {
   }
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll.right .diff__coll-title {
+    padding-right: 0;
+  }
+}
+
 .diff__coll-title {
   margin-bottom: 38px;
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll-title {
+    margin-bottom: 19px;
+  }
+}
+
 .diff__item {
   position: relative;
   text-align: left;
@@ -850,6 +1406,14 @@ b {
   }
 }
 
+@media (max-width: 991.98px) {
+  .diff__item {
+    font-size: 18px;
+    margin-bottom: 25px;
+    padding-bottom: 9px;
+  }
+}
+
 .diff__item:last-child {
   margin-bottom: 0;
 }
@@ -872,6 +1436,12 @@ b {
   }
 }
 
+@media (max-width: 991.98px) {
+  .diff__status {
+    border-radius: 11px;
+  }
+}
+
 .diff__status::before {
   position: absolute;
   left: 50%;
@@ -1113,7 +1683,7 @@ b {
 }
 
 .uses {
-  margin-bottom: 122px;
+  margin-bottom: 120px;
 }
 
 @media (min-width: 1720px) {
@@ -1132,7 +1702,7 @@ b {
 
 .uses__item {
   min-height: 50px;
-  margin-bottom: 43px;
+  margin-bottom: 19px;
   padding: 0 50px 0 2px;
 }
 
@@ -1161,6 +1731,7 @@ b {
 
 .sore {
   margin-bottom: 160px;
+  margin-top: 1px;
 }
 
 @media (min-width: 1720px) {

static/css/moover/cards.css

@@ -7,9 +7,10 @@
   position: relative;
 }
 
-.cards__img:hover {
+@media (max-width: 991.98px) {
-  scale: 1.05;
+  .cards__item {
-  transition: scale 0.15s linear;
+    max-width: 270px;
+  }
 }
 
 .cards__img {
@@ -23,6 +24,17 @@
   }
 }
 
+@media (max-width: 991.98px) {
+  .cards__img {
+    margin-bottom: 8px;
+  }
+}
+
+.cards__img:hover {
+  scale: 1.05;
+  transition: scale 0.15s linear;
+}
+
 .cards__desc {
   font-weight: 500;
   line-height: 22px;
@@ -37,6 +49,21 @@
   }
 }
 
+@media (max-width: 1279.98px) {
+  .cards__desc {
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-bottom: 3px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .cards__desc {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
 .cards__desc a {
   color: var(--color-orange);
 }
@@ -56,3 +83,46 @@
     top: -29px;
   }
 }
+
+@media (max-width: 1304.98px) {
+  .cards__arrow {
+    top: -8%;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .cards__arrow {
+    display: none;
+  }
+}
+
+.cards .slick-list {
+  overflow: visible;
+}
+
+.slick-dots {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: 1rem 0;
+  list-style-type: none;
+}
+
+.slick-dots li {
+  margin: 0 0.25rem;
+}
+
+.slick-dots button {
+  display: block;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: none;
+  border-radius: 100%;
+  background-color: #D9D9D9;
+  text-indent: -9999px;
+}
+
+.slick-dots li.slick-active button {
+  background-color: var(--color-orange);
+}

static/css/moover/chatterbox.css

@@ -36,6 +36,14 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox__slide {
+    width: 300px;
+    height: 615px;
+    background-size: 300px 615px;
+  }
+}
+
 .chatterbox__slide.loaded video {
   opacity: 1;
 }
@@ -146,6 +154,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .chatterbox__vbox {
+    height: 530px;
+  }
+}
+
 .chatterbox .title {
   margin-bottom: 60px;
 }

static/css/moover/diff.css

@@ -1,5 +1,5 @@
 .diff {
-  margin-bottom: 166px;
+  margin-bottom: 168px;
 }
 
 @media (min-width: 1720px) {
@@ -8,6 +8,12 @@
   }
 }
 
+@media (max-width: 991.98px) {
+  .diff {
+    margin-bottom: 125px;
+  }
+}
+
 .diff .title {
   width: 60%;
   margin-bottom: 65px;
@@ -20,6 +26,20 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .diff .title {
+    width: 73%;
+    margin-bottom: 40px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .diff .title {
+    width: 90%;
+    margin-bottom: 40px;
+  }
+}
+
 .diff__grid {
   display: flex;
   position: relative;
@@ -38,14 +58,38 @@
   bottom: 0;
 }
 
+@media (max-width: 991.98px) {
+  .diff__grid::before {
+    display: none;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .diff__grid {
+    display: block;
+  }
+}
+
 .diff__coll {
   width: 50%;
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll {
+    width: 100%;
+  }
+}
+
 .diff__coll.left {
   margin-right: 29px;
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll.left {
+    margin-right: 0;
+  }
+}
+
 .diff__coll.left .diff__coll-title {
   padding-left: 39px;
 }
@@ -56,10 +100,23 @@
   }
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll.left .diff__coll-title {
+    padding-left: 0;
+  }
+}
+
 .diff__coll.right {
   margin-left: 29px;
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll.right {
+    margin-left: 0;
+    display: none;
+  }
+}
+
 .diff__coll.right .diff__coll-title {
   padding-right: 39px;
 }
@@ -70,10 +127,22 @@
   }
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll.right .diff__coll-title {
+    padding-right: 0;
+  }
+}
+
 .diff__coll-title {
   margin-bottom: 38px;
 }
 
+@media (max-width: 991.98px) {
+  .diff__coll-title {
+    margin-bottom: 19px;
+  }
+}
+
 .diff__item {
   position: relative;
   text-align: left;
@@ -102,6 +171,14 @@
   }
 }
 
+@media (max-width: 991.98px) {
+  .diff__item {
+    font-size: 18px;
+    margin-bottom: 25px;
+    padding-bottom: 9px;
+  }
+}
+
 .diff__item:last-child {
   margin-bottom: 0;
 }
@@ -124,6 +201,12 @@
   }
 }
 
+@media (max-width: 991.98px) {
+  .diff__status {
+    border-radius: 11px;
+  }
+}
+
 .diff__status::before {
   position: absolute;
   left: 50%;

static/css/moover/easy.css

@@ -8,6 +8,18 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy {
+    margin-bottom: 142px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy {
+    margin-bottom: 121px;
+  }
+}
+
 .easy .title {
   max-width: 55%;
   margin-bottom: 21px;
@@ -20,6 +32,12 @@
   }
 }
 
+@media (max-width: 991.98px) {
+  .easy .title {
+    max-width: 75%;
+  }
+}
+
 .easy .subtitle {
   margin-bottom: 41px;
 }
@@ -49,6 +67,21 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy__grid {
+    grid-column-gap: 69px;
+    grid-template-rows: repeat(2, minmax(172px, auto));
+    margin-bottom: 41px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy__grid {
+    display: block;
+    margin-bottom: 40px;
+  }
+}
+
 .easy__item {
   border-radius: 30px;
   background-color: var(--color-grey);
@@ -72,6 +105,20 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy__item--fir {
+    margin-right: 13px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--fir {
+    padding-top: 17px;
+    margin-right: 0;
+    margin-bottom: 43px;
+  }
+}
+
 .easy__item--fir p {
   width: 93%;
   margin-bottom: 29px;
@@ -84,24 +131,29 @@
   }
 }
 
-.easy__item--thr {
-  grid-area: c;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .easy__item--sec {
   grid-area: b;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--sec {
+    padding-top: 35px;
+    padding-bottom: 37px;
+    margin-bottom: 39px;
+  }
 }
 
 .easy__item--sec img {
   margin-bottom: -10px;
   margin-right: -5px;
+  max-width: 50.1%;
 }
 
 @media (min-width: 1720px) {
@@ -110,13 +162,78 @@
   }
 }
 
-.easy__item--thr img {
+@media (max-width: 1304.98px) {
+  .easy__item--sec img {
+    max-width: 43.1%;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--sec img {
+    margin-right: 0;
+    margin-bottom: 0;
+  }
+}
+
+.easy__item--sec p {
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.easy__item--thr {
+  grid-area: c;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--thr {
+    padding-top: 42px;
+    padding-bottom: 46px;
+  }
+}
+
+.easy__item--thr .img {
   margin-bottom: -10px;
   margin-right: 24px;
+  max-width: 80%;
+}
+
+@media (max-width: 1279.98px) {
+  .easy__item--thr .img {
+    max-width: 35%;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .easy__item--thr .img {
+    margin-right: 2px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--thr .img {
+    margin-right: 0;
+    max-width: 34%;
+  }
 }
 
 .easy__item--thr p {
   max-width: 50%;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+@media (max-width: 991.98px) {
+  .easy__item--thr p {
+    max-width: 60%;
+  }
 }
 
 .easy__arrow {
@@ -133,6 +250,18 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy__arrow {
+    scale: 0.8;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .easy__arrow {
+    display: none;
+  }
+}
+
 .easy__arrow--fir {
   top: 46%;
   right: 101%;
@@ -145,6 +274,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy__arrow--fir {
+    top: 48%;
+  }
+}
+
 .easy__arrow--sec {
   top: 117%;
   left: 30%;
@@ -158,15 +293,20 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .easy__arrow--sec {
+    left: 38%;
+  }
+}
+
 .easy__btn {
   margin-top: -21px;
 }
 
-.easy__item--sec p,
+@media (max-width: 991.98px) {
-.easy__item--thr p,
+  .easy__btn {
-.easy__item--sec,
+    margin-top: -26px;
-.easy__item--thr {
+    padding-left: 54px;
-  margin-bottom: 0;
+    padding-right: 54px;
-  padding-top: 0;
+  }
-  padding-bottom: 0;
 }

static/css/moover/header.css

@@ -0,0 +1,99 @@
+.header {
+  margin-top: 0;
+  position: relative;
+  padding: 40px 5px;
+}
+
+@media (max-width: 991.98px) {
+  .header {
+    padding-top: 19px;
+    padding-bottom: 19px;
+  }
+}
+
+.header__grid, .header__list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header__logo {
+  width: 48px;
+  height: 48px;
+  position: relative;
+  left: 5px;
+}
+
+@media (max-width: 1304.98px) {
+  .header__logo {
+    left: 14px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .header__logo {
+    left: 0;
+  }
+}
+
+.header__nav {
+  flex-grow: 1;
+  max-width: 41%;
+  margin-left: auto;
+}
+
+@media (min-width: 1720px) {
+  .header__nav {
+    max-width: 34%;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .header__nav {
+    max-width: 46%;
+  }
+}
+
+.header__link {
+  color: var(--color-black2);
+  text-decoration: none;
+}
+
+.header__btn {
+  padding: 8px 0 6px;
+  font-size: 16px;
+  margin-left: 61px;
+  margin-right: -3px;
+}
+
+@media (min-width: 1720px) {
+  .header__btn {
+    margin-left: 81px;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .header__btn {
+    margin-right: -8px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .header__btn {
+    display: none;
+  }
+}
+
+.header .dropdown {
+  left: -4px;
+}
+
+.header .dropdown-content {
+  right: 0;
+  height: initial;
+}
+
+.header .dropdown img {
+  width: 25px;
+  height: 25px;
+}

static/css/moover/presentation.css

@@ -1,5 +1,5 @@
 .presentation {
-  margin: 20px -65px 140px;
+  margin: 12px -65px 140px;
 }
 
 @media (min-width: 1720px) {
@@ -10,6 +10,18 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .presentation {
+    margin-bottom: 120px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .presentation {
+    margin-bottom: 105px;
+  }
+}
+
 .presentation__top {
   position: relative;
   min-height: 270px;
@@ -30,19 +42,65 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .presentation__top {
+    background-size: 16%, 20%, 9.5%, 10.1%;
+    background-position: top -2.8% left 6.5%, top -19% right 3.5%, bottom 32% left 23%, bottom 29% right 22.6%;
+    margin-bottom: 96px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .presentation__top {
+    background-size: 14.5%, 17%, 8.3%, 9.1%;
+    background-position: top 9% left 7%, top 5% right 6%, bottom 51% left 14.8%, bottom 47.5% right 13.8%;
+    padding-top: 31px;
+    margin-bottom: 76px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .presentation__bottom .subtitle {
+    max-width: 40%;
+    margin: 0 auto 30px;
+  }
+}
+
 .presentation__title {
   margin-bottom: 23px;
 }
 
+@media (max-width: 991.98px) {
+  .presentation__title {
+    max-width: 75%;
+    margin: 0 auto 19px;
+  }
+}
+
 .presentation__subtitle {
   margin-bottom: 41px;
   font-weight: 600;
 }
 
+@media (max-width: 991.98px) {
+  .presentation__subtitle {
+    max-width: 55%;
+    margin: 0 auto 40px;
+    font-size: 16px;
+  }
+}
+
 .presentation__btn {
   margin-bottom: 40px;
 }
 
+@media (max-width: 991.98px) {
+  .presentation__btn {
+    padding-left: 82px;
+    padding-right: 82px;
+  }
+}
+
 .presentation__next {
   font-weight: 500;
   line-height: 22px;
@@ -67,6 +125,12 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .presentation__cards {
+    max-width: 1140px;
+  }
+}
+
 .presentation__bottom .presentation__title {
   margin-bottom: 13px;
 }

static/css/moover/root.css

@@ -2,7 +2,6 @@
   margin: 0 auto;
   width: 1280px;
   position: relative;
-  min-height: 695px;
 }
 
 @media (min-width: 1720px) {
@@ -11,11 +10,19 @@
   }
 }
 
-/*@media (max-width: 1019.98px) {*/
+@media (max-width: 1304.98px) {
-/*  .container {*/
+  .container {
-/*    width: 720px*/
+    width: 1120px;
-/*  }*/
+    max-width: 88vw;
-/*}*/
+  }
+}
+
+@media (max-width: 991.98px) {
+  .container {
+    width: 640px;
+  }
+}
+
 /*@media (max-width: 767.98px) {*/
 /*  .container {*/
 /*    margin: 0 15px;*/
@@ -36,6 +43,10 @@
   color: var(--color-black2);
 }
 
+body {
+  overflow-x: hidden;
+}
+
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
 }
@@ -128,6 +139,19 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .title {
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .title {
+    font-size: 32px;
+    line-height: 38.73px;
+  }
+}
+
 .subtitle {
   margin-bottom: 81px;
   line-height: 22px;
@@ -140,12 +164,18 @@ b {
   }
 }
 
+@media (max-width: 1304.98px) {
+  .subtitle {
+    margin-bottom: 71px;
+  }
+}
+
 .hide {
   display: none;
 }
 
 .hide__xxl {
-  display: block;
+  display: initial;
 }
 
 @media (min-width: 1720px) {
@@ -154,6 +184,16 @@ b {
   }
 }
 
+.hide__md {
+  display: initial;
+}
+
+@media (max-width: 991.98px) {
+  .hide__md {
+    display: none;
+  }
+}
+
 .show__xxl {
   display: none;
 }
@@ -164,11 +204,30 @@ b {
   }
 }
 
-@media (min-width: 1440px) {
+.show__md {
-  .is-container.wrapper_main {
+  display: none;
-    max-width: initial;
+}
+
+@media (max-width: 991.98px) {
+  .show__md {
+    display: initial;
   }
+}
+
+@media (min-width: 1440px) {
   .br--xxl {
     display: none;
   }
 }
+
+@media (max-width: 991.98px) {
+  .br--md {
+    display: none;
+  }
+}
+
+@media (min-width: 1440px) {
+  .is-container.wrapper_main {
+    max-width: initial;
+  }
+}

static/css/moover/sore.css

@@ -1,5 +1,6 @@
 .sore {
   margin-bottom: 160px;
+  margin-top: 1px;
 }
 
 @media (min-width: 1720px) {

static/css/moover/use.css

@@ -8,6 +8,18 @@
   }
 }
 
+@media (max-width: 1304.98px) {
+  .use {
+    margin-bottom: 145px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .use {
+    margin-bottom: 121px;
+  }
+}
+
 .use__img {
   width: 67.5%;
   margin-left: 16px;
@@ -18,6 +30,21 @@
   .use__img {
     width: 50.2%;
     margin-left: 27px;
+    margin-bottom: 35px;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .use__img {
+    width: 77%;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .use__img {
+    margin-left: 0;
+    width: 100%;
+    margin-bottom: 40px;
   }
 }
 
@@ -43,13 +70,19 @@
   }
 }
 
+@media (max-width: 991.98px) {
+  .use .title {
+    margin-bottom: 38px;
+  }
+}
+
 .use--lett {
   margin-bottom: 120px;
 }
 
 @media (min-width: 1720px) {
   .use--lett {
-    margin-bottom: 140px;
+    margin-bottom: 135px;
   }
 }
 
@@ -69,3 +102,10 @@
     width: initial;
   }
 }
+
+@media (max-width: 991.98px) {
+  .use .h3 {
+    max-width: 75%;
+    margin: 0 auto 22px;
+  }
+}

static/css/moover/uses.css

@@ -1,5 +1,5 @@
 .uses {
-  margin-bottom: 122px;
+  margin-bottom: 120px;
 }
 
 @media (min-width: 1720px) {
@@ -18,7 +18,7 @@
 
 .uses__item {
   min-height: 50px;
-  margin-bottom: 43px;
+  margin-bottom: 19px;
   padding: 0 50px 0 2px;
 }
 

styles/moover.scss

@@ -1,4 +1,5 @@
 @import "./moover/root";
+@import "./moover/header";
 @import "./moover/presentation";
 @import "./moover/cards";
 @import "./moover/easy";

styles/moover/cards.scss

@@ -1,55 +1,122 @@
 .cards {
-}
 
-.cards__list {
+  &__list {
-  display: grid;
+    display: grid;
-  grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, 1fr);
-}
+  }
 
-.cards__item {
+  &__item {
-  position: relative;
+    position: relative;
-}
 
-.cards__img:hover {
+    @media (max-width: 991.98px) {
-  scale: 1.05;
+      max-width: 270px;
-  transition: scale 0.15s linear;
+    }
-}
+  }
 
-.cards__img {
+  &__img {
-  margin-bottom: 5px;
+    margin-bottom: 5px;
 
-  @media (min-width: 1720px) {
+    @media (min-width: 1720px) {
-    width: 100%;
+      width: 100%;
-    margin-bottom: 15px;
+      margin-bottom: 15px;
+    }
+
+    @media (max-width: 991.98px) {
+      margin-bottom: 8px;
+    }
+
+    &:hover {
+      scale: 1.05;
+      transition: scale 0.15s linear;
+    }
+  }
+
+  &__desc {
+    font-weight: 500;
+    line-height: 22px;
+
+    @media (min-width: 1720px) {
+      font-size: 20px;
+      line-height: 26px;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    @media (max-width: 1279.98px) {
+      padding-left: 5px;
+      padding-right: 5px;
+      margin-bottom: 3px;
+    }
+
+    @media (max-width: 991.98px) {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
+    a {
+      color: var(--color-orange);
+    }
+  }
+
+
+  &__arrow {
+    width: 62px;
+    height: 20px;
+    position: absolute;
+    right: -30px;
+    top: -21px;
+    background-image: url("/static/img/svg/Arrow23.svg");
+
+    @media (min-width: 1720px) {
+      right: -45px;
+      top: -29px;
+    }
+
+    @media (max-width: 1304.98px) {
+      top: -8%;
+    }
+
+    @media (max-width: 991.98px) {
+      display: none;
+    }
+
+
+  }
+
+
+  .slick-list {
+    overflow: visible;
   }
 }
 
-.cards__desc {
+.slick-dots {
-  font-weight: 500;
+  display: flex;
-  line-height: 22px;
+  justify-content: center;
 
-  @media (min-width: 1720px) {
+  margin: 0;
-    font-size: 20px;
+  padding: 1rem 0;
-    line-height: 26px;
+
-    padding-left: 20px;
+  list-style-type: none;
-    padding-right: 20px;
+
+  li {
+    margin: 0 0.25rem;
   }
 
-  a {
+  button {
-    color: var(--color-orange);
+    display: block;
-  }
+    width: 8px;
-}
+    height: 8px;
-
+    padding: 0;
-.cards__arrow {
+
-  width: 62px;
+    border: none;
-  height: 20px;
+    border-radius: 100%;
-  position: absolute;
+    background-color: #D9D9D9;
-  right: -30px;
+
-  top: -21px;
+    text-indent: -9999px;
-  background-image: url("/static/img/svg/Arrow23.svg");
-
-  @media (min-width: 1720px) {
-    right: -45px;
-    top: -29px;
   }
+
+  li.slick-active button {
+    background-color: var(--color-orange);
+  }
+
 }

styles/moover/chatterbox.scss

@@ -1,8 +1,8 @@
 .chatterbox {
   margin-bottom: 160px;
 
-   @media (min-width: 1720px) {
+  @media (min-width: 1720px) {
-     margin-bottom: 180px;
+    margin-bottom: 180px;
   }
 
   &__slider {
@@ -28,6 +28,12 @@
       background-size: 456px 836px;
     }
 
+    @media (max-width: 1304.98px) {
+      width: 300px;
+      height: 615px;
+      background-size: 300px 615px;
+    }
+
     &.loaded {
       video {
         opacity: 1;
@@ -92,10 +98,10 @@
       border-radius: 50%;
       transition: opacity 100ms linear;
 
-       @media (min-width: 1720px) {
+      @media (min-width: 1720px) {
-         width: 109px;
+        width: 109px;
-         height: 109px;
+        height: 109px;
-  }
+      }
     }
 
     &::before,
@@ -115,10 +121,10 @@
       display: inline-block;
       margin-left: 2px;
 
-       @media (min-width: 1720px) {
+      @media (min-width: 1720px) {
-          border-width: 23px 0 23px 35px;
+        border-width: 23px 0 23px 35px;
-         margin-left: 4px;
+        margin-left: 4px;
-  }
+      }
     }
   }
 
@@ -132,6 +138,10 @@
     @media (min-width: 1720px) {
       height: 827px;
     }
+
+    @media (max-width: 1304.98px) {
+      height: 530px;
+    }
   }
 
   .title {

styles/moover/diff.scss

@@ -1,8 +1,12 @@
 .diff {
-  margin-bottom: 166px;
+  margin-bottom: 168px;
 
-   @media (min-width: 1720px) {
+  @media (min-width: 1720px) {
-     margin-bottom: 172px;
+    margin-bottom: 172px;
+  }
+
+  @media (max-width: 991.98px) {
+    margin-bottom: 125px;
   }
 
   .title {
@@ -13,6 +17,16 @@
       width: 49%;
       margin-bottom: 60px;
     }
+
+    @media (max-width: 1304.98px) {
+      width: 73%;
+      margin-bottom: 40px;
+    }
+
+    @media (max-width: 991.98px) {
+      width: 90%;
+      margin-bottom: 40px;
+    }
   }
 
   &__grid {
@@ -30,33 +44,62 @@
       left: 50%;
       transform: translateX(-50%);
       bottom: 0;
+
+      @media (max-width: 991.98px) {
+        display: none;
+      }
+    }
+
+    @media (max-width: 991.98px) {
+      display: block;
     }
   }
 
   &__coll {
     width: 50%;
 
+    @media (max-width: 991.98px) {
+      width: 100%;
+    }
+
     &.left {
       margin-right: 29px;
 
+      @media (max-width: 991.98px) {
+        margin-right: 0;
+      }
+
       .diff__coll-title {
         padding-left: 39px;
 
         @media (min-width: 1720px) {
           padding-left: 24px;
         }
+
+        @media (max-width: 991.98px) {
+          padding-left: 0;
+        }
       }
     }
 
     &.right {
       margin-left: 29px;
 
+      @media (max-width: 991.98px) {
+        margin-left: 0;
+        display: none;
+      }
+
       .diff__coll-title {
         padding-right: 39px;
 
         @media (min-width: 1720px) {
           padding-right: 24px;
         }
+
+        @media (max-width: 991.98px) {
+          padding-right: 0;
+        }
       }
     }
 
@@ -64,6 +107,10 @@
 
   &__coll-title {
     margin-bottom: 38px;
+
+    @media (max-width: 991.98px) {
+      margin-bottom: 19px;
+    }
   }
 
   &__item {
@@ -91,6 +138,12 @@
       margin-bottom: 38px;
     }
 
+    @media (max-width: 991.98px) {
+      font-size: 18px;
+      margin-bottom: 25px;
+      padding-bottom: 9px;
+    }
+
     &:last-child {
       margin-bottom: 0;
     }
@@ -115,6 +168,10 @@
       border-radius: 12px;
     }
 
+    @media (max-width: 991.98px) {
+      border-radius: 11px;
+    }
+
     &::before {
       position: absolute;
       left: 50%;

styles/moover/easy.scss

@@ -1,10 +1,19 @@
 .easy {
   margin-bottom: 162px;
 
-   @media (min-width: 1720px) {
+  @media (min-width: 1720px) {
-     margin-bottom: 180px;
+    margin-bottom: 180px;
   }
 
+  @media (max-width: 1304.98px) {
+    margin-bottom: 142px;
+  }
+
+  @media (max-width: 991.98px) {
+    margin-bottom: 121px;
+  }
+
+
   .title {
     max-width: 55%;
     margin-bottom: 21px;
@@ -13,6 +22,10 @@
       max-width: 45%;
       margin-bottom: 23px;
     }
+
+    @media (max-width: 991.98px) {
+      max-width: 75%;
+    }
   }
 
   .subtitle {
@@ -40,6 +53,17 @@
       grid-row-gap: 136px;
       margin-bottom: 63px;
     }
+
+    @media (max-width: 1304.98px) {
+      grid-column-gap: 69px;
+      grid-template-rows: repeat(2, minmax(172px, auto));
+      margin-bottom: 41px;
+    }
+
+    @media (max-width: 991.98px) {
+      display: block;
+      margin-bottom: 40px;
+    }
   }
 
   &__item {
@@ -61,6 +85,16 @@
         padding-top: 31px;
       }
 
+      @media (max-width: 1304.98px) {
+        margin-right: 13px;
+      }
+
+      @media (max-width: 991.98px) {
+        padding-top: 17px;
+        margin-right: 0;
+        margin-bottom: 43px;
+      }
+
       p {
         width: 93%;
         margin-bottom: 29px;
@@ -72,38 +106,93 @@
       }
     }
 
-    &--thr {
-      grid-area: c;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
     &--sec {
       grid-area: b;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      margin-bottom: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      @media (max-width: 991.98px) {
+        padding-top: 35px;
+        padding-bottom: 37px;
+
+        margin-bottom: 39px;
+      }
 
       img {
         margin-bottom: -10px;
         margin-right: -5px;
+        max-width: 50.1%;
 
         @media (min-width: 1720px) {
           margin-right: -12px;
         }
+
+        @media (max-width: 1304.98px) {
+          max-width: 43.1%;
+        }
+
+        @media (max-width: 991.98px) {
+          margin-right: 0;
+          margin-bottom: 0;
+        }
+      }
+
+      p {
+        margin-bottom: 0;
+        padding-top: 0;
+        padding-bottom: 0;
       }
     }
 
+    &--thr {
+      grid-area: c;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      //background-color: #00a420;
 
-    &--thr img {
+      @media (max-width: 991.98px) {
-      margin-bottom: -10px;
+        padding-top: 42px;
-      margin-right: 24px;
+        padding-bottom: 46px;
-    }
+      }
 
-    &--thr p {
+      .img {
-      max-width: 50%;
+        margin-bottom: -10px;
+        margin-right: 24px;
+        max-width: 80%;
+
+        @media (max-width: 1279.98px) {
+          max-width: 35%;
+        }
+
+        @media (max-width: 1304.98px) {
+          margin-right: 2px;
+        }
+
+        @media (max-width: 991.98px) {
+          margin-right: 0;
+          max-width: 34%;
+        }
+      }
+
+      p {
+        max-width: 50%;
+        margin-bottom: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+
+        @media (max-width: 991.98px) {
+          max-width: 60%;
+        }
+      }
     }
   }
 
@@ -118,6 +207,14 @@
       scale: 1.4;
     }
 
+    @media (max-width: 1304.98px) {
+      scale: 0.8;
+    }
+
+    @media (max-width: 991.98px) {
+      display: none;
+    }
+
     &--fir {
       top: 46%;
       right: 101%;
@@ -126,6 +223,9 @@
         right: 104%;
         top: 34%;
       }
+      @media (max-width: 1304.98px) {
+        top: 48%;
+      }
     }
 
     &--sec {
@@ -137,19 +237,20 @@
         left: 46%;
         top: 124%;
       }
+
+      @media (max-width: 1304.98px) {
+        left: 38%;
+      }
     }
   }
 
   &__btn {
     margin-top: -21px;
+
+    @media (max-width: 991.98px) {
+      margin-top: -26px;
+      padding-left: 54px;
+      padding-right: 54px;
+    }
   }
 }
-
-.easy__item--sec p,
-.easy__item--thr p,
-.easy__item--sec,
-.easy__item--thr {
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-}

styles/moover/header.scss

@@ -0,0 +1,89 @@
+.header {
+  margin-top: 0;
+  position: relative;
+  padding: 40px 5px;
+
+  @media (max-width: 991.98px) {
+    padding-top: 19px;
+    padding-bottom: 19px;
+  }
+
+  &__grid,
+  &__list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__grid {
+  }
+
+  &__logo {
+    width: 48px;
+    height: 48px;
+    position: relative;
+    left: 5px;
+
+    @media (max-width: 1304.98px) {
+      left: 14px;
+    }
+
+    @media (max-width: 991.98px) {
+      left: 0;
+    }
+  }
+
+  &__nav {
+    flex-grow: 1;
+    max-width: 41%;
+    margin-left: auto;
+
+    @media (min-width: 1720px) {
+      max-width: 34%;
+    }
+
+    @media (max-width: 1304.98px) {
+      max-width: 46%;
+    }
+    //@media (max-width: 991.98px) {
+    //}
+  }
+
+  &__link {
+    color: var(--color-black2);
+    text-decoration: none;
+  }
+
+  &__btn {
+    padding: 8px 0 6px;
+    font-size: 16px;
+    margin-left: 61px;
+    margin-right: -3px;
+
+    @media (min-width: 1720px) {
+      margin-left: 81px;
+    }
+
+    @media (max-width: 1304.98px) {
+      margin-right: -8px;
+    }
+
+    @media (max-width: 991.98px) {
+      display: none;
+    }
+  }
+
+  .dropdown {
+    left: -4px;
+
+    &-content {
+      right: 0;
+      height: initial;
+    }
+
+    img {
+      width: 25px;
+      height: 25px;
+    }
+  }
+}

styles/moover/presentation.scss

@@ -1,5 +1,5 @@
 .presentation {
-  margin: 20px -65px 140px;
+  margin: 12px -65px 140px;
 
   @media (min-width: 1720px) {
     margin-left: 0;
@@ -7,6 +7,14 @@
     margin-bottom: 160px;
   }
 
+  @media (max-width: 1304.98px) {
+    margin-bottom: 120px;
+  }
+
+  @media (max-width: 991.98px) {
+    margin-bottom: 105px;
+  }
+
   &__top {
     position: relative;
     min-height: 270px;
@@ -35,19 +43,64 @@
       padding-top: 95px;
       margin-bottom: 176px;
     }
+
+    @media (max-width: 1304.98px) {
+      background-size: 16%, 20%, 9.5%, 10.1%;
+      background-position: top -2.8% left 6.5%,
+      top -19% right 3.5%,
+      bottom 32% left 23%,
+      bottom 29% right 22.6%;
+      margin-bottom: 96px;
+    }
+
+    @media (max-width: 991.98px) {
+      background-size: 14.5%, 17%, 8.3%, 9.1%;
+      background-position: top 9% left 7%,
+      top 5% right 6%,
+      bottom 51% left 14.8%,
+      bottom 47.5% right 13.8%;
+      padding-top: 31px;
+      margin-bottom: 76px;
+    }
+  }
+
+  &__bottom {
+    .subtitle {
+      @media (max-width: 991.98px) {
+        max-width: 40%;
+        margin: 0 auto 30px;
+      }
+    }
   }
 
   &__title {
     margin-bottom: 23px;
+
+    @media (max-width: 991.98px) {
+      max-width: 75%;
+      margin: 0 auto 19px;
+    }
   }
 
   &__subtitle {
     margin-bottom: 41px;
     font-weight: 600;
+
+    @media (max-width: 991.98px) {
+      max-width: 55%;
+      margin: 0 auto 40px;
+      font-size: 16px;
+
+    }
   }
 
   &__btn {
     margin-bottom: 40px;
+
+    @media (max-width: 991.98px) {
+      padding-left: 82px;
+      padding-right: 82px;
+    }
   }
 
   &__next {
@@ -70,6 +123,10 @@
       margin-left: -10px;
       margin-right: -10px;
     }
+
+    @media (max-width: 1304.98px) {
+      max-width: 1140px;
+    }
   }
 
   &__bottom .presentation__title {

styles/moover/root.scss

@@ -2,7 +2,6 @@
   margin: 0 auto;
   width: 1280px;
   position: relative;
-  min-height: 695px;
 }
 
 @media (min-width: 1720px) {
@@ -12,11 +11,19 @@
 }
 
 
-/*@media (max-width: 1019.98px) {*/
+@media (max-width: 1304.98px) {
-/*  .container {*/
+  .container {
-/*    width: 720px*/
+    width: 1120px;
-/*  }*/
+    max-width: 88vw;
-/*}*/
+  }
+}
+
+@media (max-width: 991.98px) {
+  .container {
+    width: 640px
+    //max-width: 85vw;
+  }
+}
 
 /*@media (max-width: 767.98px) {*/
 /*  .container {*/
@@ -41,6 +48,11 @@
   color: var(--color-black2);
 }
 
+
+body {
+  overflow-x: hidden;
+}
+
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
 
@@ -125,6 +137,15 @@ b {
     font-size: 48px;
     margin-bottom: 22px;
   }
+
+  @media (max-width: 1304.98px) {
+    margin-bottom: 20px;
+  }
+
+  @media (max-width: 991.98px) {
+    font-size: 32px;
+    line-height: 38.73px;
+  }
 }
 
 .subtitle {
@@ -135,18 +156,32 @@ b {
     font-size: 20px;
     margin-bottom: 105px;
   }
+
+  @media (max-width: 1304.98px) {
+    margin-bottom: 71px;
+  }
+
+
 }
 
 .hide {
   display: none;
 
   &__xxl {
-    display: block;
+    display: initial;
 
     @media (min-width: 1720px) {
       display: none;
     }
   }
+
+  &__md {
+    display: initial;
+
+    @media (max-width: 991.98px) {
+      display: none;
+    }
+  }
 }
 
 .show {
@@ -158,17 +193,33 @@ b {
       display: block;
     }
   }
+
+  &__md {
+    display: none;
+
+    @media (max-width: 991.98px) {
+      display: initial;
+    }
+  }
+}
+
+.br {
+  &--xxl {
+    @media (min-width: 1440px) {
+      display: none;
+    }
+  }
+
+  &--md {
+    @media (max-width: 991.98px) {
+      display: none;
+    }
+  }
 }
 
 @media (min-width: 1440px) {
   .is-container.wrapper_main {
     max-width: initial;
   }
-
-  .br {
-    &--xxl {
-      display: none;
-    }
-  }
 }
 

styles/moover/sore.scss

@@ -1,5 +1,6 @@
 .sore {
   margin-bottom: 160px;
+  margin-top: 1px;
 
   @media (min-width: 1720px) {
     margin-bottom: 178px;

styles/moover/use.scss

@@ -5,6 +5,14 @@
     margin-bottom: 184px;
   }
 
+  @media (max-width: 1304.98px) {
+    margin-bottom: 145px;
+  }
+
+  @media (max-width: 991.98px) {
+    margin-bottom: 121px;
+  }
+
   &__img {
     width: 67.5%;
     margin-left: 16px;
@@ -13,6 +21,17 @@
     @media (min-width: 1720px) {
       width: 50.2%;
       margin-left: 27px;
+      margin-bottom: 35px;
+    }
+
+    @media (max-width: 1304.98px) {
+      width: 77%;
+    }
+
+    @media (max-width: 991.98px) {
+      margin-left: 0;
+      width: 100%;
+      margin-bottom: 40px;
     }
   }
 
@@ -34,13 +53,17 @@
     @media (min-width: 1720px) {
       max-width: 40%;
     }
+
+    @media (max-width: 991.98px) {
+      margin-bottom: 38px;
+    }
   }
 
   &--lett {
     margin-bottom: 120px;
 
     @media (min-width: 1720px) {
-      margin-bottom: 140px;
+      margin-bottom: 135px;
     }
 
 
@@ -57,6 +80,14 @@
       @media (min-width: 1720px) {
         width: initial;
       }
+
+    }
+  }
+
+  .h3 {
+    @media (max-width: 991.98px) {
+      max-width: 75%;
+      margin: 0 auto 22px;
     }
   }
 }

styles/moover/uses.scss

@@ -1,5 +1,5 @@
 .uses {
-  margin-bottom: 122px;
+  margin-bottom: 120px;
 
   @media (min-width: 1720px) {
     margin-bottom: 136px;
@@ -18,7 +18,7 @@
 
   &__item {
     min-height: 50px;
-    margin-bottom: 43px;
+    margin-bottom: 19px;
     padding: 0 50px 0 2px;
 
     @media (min-width: 1720px) {

templates/blocks/n_header.html

@@ -3,24 +3,50 @@
 {% load webpush_notifications %}
 
 </div>
-<header id="header_bg" class="header">
+<header class="header">
-  <div class="header__logo">
+  <div class="header__grid container">
+    <div class="header__logo">
+      <a href="{% url 'main' %}">
+        <img class="svg" src="/static/img/png/finlogo.png">
+      </a>
+    </div>
 
+
+    <nav class="header__nav hide__md">
+      <ul class="header__list">
+        <li class="header__item">
+          <a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
+        </li>
+        <li class="header__item">
+          <a href="#rewiews" class="header__link">{% trans "Отзывы" %}</a>
+        </li>
+        <li class="header__item">
+          <a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
+        </li>
+        <li class="header__item">
+          <a href="#about" class="header__link">{% trans "О сервисе" %}</a>
+        </li>
+      </ul>
+    </nav>
+    <a
+        class="header__btn btn btn--primary hide--md"
+        onclick="ym(97070898,'reachGoal','reg_button_header'); return true"
+        href="{% url "registration_page" %}">
+      {% trans "Регистрируйся" %}
+    </a>
+    <div class="dropdown show__md">
+      <img onclick="showMenu(this, event)" class="dropbtn" src="/static/img/svg/Menu.svg">
+      <div
+          onblur="hideMenu(event)"
+          class="dropdown-content"
+      >
+        <a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
+        <a href="#rewiews" class="header__link">{% trans "Отзывы" %}</a>
+        <a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
+        <a href="#about" class="header__link">{% trans "О сервисе" %}</a>
+
+
+      </div>
+    </div>
   </div>
-  <nav class="header__nav">
-    <ul class="header__list">
-      <li class="header__item">
-        <a href="#benefits" class="header__link">Преимущества</a>
-      </li>
-      <li class="header__item">
-        <a href="#rewiews" class="header__link">Отзывы</a>
-      </li>
-      <li class="header__item">
-        <a href="#howtowork" class="header__link">Как это работает</a>
-      </li>
-      <li class="header__item">
-        <a href="#about" class="header__link">О сервисе</a>
-      </li>
-    </ul>
-  </nav>
 </header>

templates/pages/p_mover_landing_page.html

@@ -48,7 +48,7 @@
             <img class="cards__img" src="{% static "img/webp/image1.webp" %}" alt="img1"/>
             <p class="cards__desc">
               {% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl'/> цена доставки почтовых<br class='br1'/>" %}
-              {% translate "сервисов и она устала искать в<br class='br--xxl'/> чатах тех, кто сможет перевезти<br class='br--xxl'/> посылку." %}
+              {% translate "сервисов и она устала искать в<br class='br--xxl'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %}
             </p>
           </div>
           <div class="cards__item">
@@ -76,6 +76,61 @@
           </div>
         </div>
       </div>
+      <script>
+        $(function () {
+          var timer = 0;
+          var cards = $('.cards');
+          var list = $('.cards__list');
+          var items = $('.cards__item');
+          if (!cards.length && !list.length && !items.length) {
+            return false;
+          }
+
+          function checkAdaptive() {
+            if (window.innerWidth <= 1000) {
+              console.log('init check')
+              initStagesSlider();
+            } else {
+              console.log('rem')
+              removeSlider();
+            }
+          }
+
+          function removeSlider() {
+            if (list.hasClass('slick-slider')) {
+              list[0].slick.unslick();
+              list[0].slick = null;
+            }
+            list.addClass('js-not-slider');
+          }
+
+          function initStagesSlider() {
+            if (!list[0].slick) {
+              console.log('init')
+              list.slick({
+                autoplay: false,
+                dots: true,
+                arrows: false,
+                infinite: false,
+                variableWidth: true,
+                slidesToScroll: 1,
+
+                touchMove: true,
+                draggable: true,
+              });
+            }
+            list.removeClass('js-not-slider');
+          }
+
+          window.addEventListener('resize', () => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+              checkAdaptive();
+            }, 400);
+          });
+          checkAdaptive();
+        });
+      </script>
     </div>
   </section>
   <section class="easy">
@@ -95,12 +150,16 @@
         <div class="easy__arrow easy__arrow--fir"></div>
         <div class="easy__arrow easy__arrow--sec"></div>
         <p>{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
-        <img src="{% static 'img/png/sender-card2.png' %}" alt="sender1">
+        <img src="{% static 'img/png/sender-card2.png' %}" alt="sender2">
       </div>
       <div class="easy__item easy__item--thr">
         <p class="hide__xxl">{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
         <p class="show__xxl">{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
-        <img src="{% static 'img/png/sender-card3.png' %}" alt="sender1">
+
+        <picture class="img">
+          <source srcset="{% static "img/png/sender-card3.png" %}" media="(min-width: 1439.98px)"/>
+          <img src="{% static 'img/png/sender-card3-md.png' %}" alt="sender3">
+        </picture>
 
       </div>
     </div>
@@ -111,7 +170,10 @@
   </section>
   <section class="use">
     <div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
-    <img src="{% static "img/webp/use.webp" %}" alt="list users" class="use__img">
+    <picture class="img">
+      <source srcset="{% static "img/webp/use.webp" %}" media="(min-width: 991.98px)"/>
+      <img src="{% static "img/png/use-md.png" %}" alt="list users" class="use__img">
+    </picture>
     <div class="h3">
       {% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
     </div>
@@ -176,7 +238,7 @@
       </div>
     </div>
   </section>
-  <section class="chatterbox" >
+  <section class="chatterbox">
     <div class="title">{% translate "Что о нас говорят люди" %}</div>
     <div class="chatterbox__slider slick-slider">
       {#      {% for media_item in page.get_media_items %}#}
@@ -294,9 +356,6 @@
           vtns.off('click.load-lazy').on('click.load-lazy', (e) => {
             const vtn = e.target;
             vtn.nextElementSibling.querySelector('video');
-            window.d = vtn;
-            {#console.log($(vtn).siblings().find('video')[0]);#}
-            {#console.log(vtn, e.target)#}
             LazyLoad.load($(vtn).siblings().find('video')[0], {
               callback_loaded: (e) => callbackLoaded(e, vtn),
             });
@@ -312,32 +371,13 @@
         $('.slick-slider')
           .slick({
             centerMode: true,
+            draggable: false,
             {#centerPadding: '160px',#}
             slidesToShow: 3,
             infinite: false,
             initialSlide: 1,
             {#lazyLoad: 'ondemand',#}
             {#lazyLoad: 'progressive',#}
-            responsive: [
-              {
-                breakpoint: 768,
-                settings: {
-                  arrows: false,
-                  centerMode: true,
-                  centerPadding: '40px',
-                  slidesToShow: 3
-                }
-              },
-              {
-                breakpoint: 480,
-                settings: {
-                  arrows: false,
-                  centerMode: true,
-                  centerPadding: '40px',
-                  slidesToShow: 1
-                }
-              }
-            ]
           })
           .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
             slick.$slides[currentSlide]?.querySelector('video')?.pause();

templates/tb_base.html

@@ -177,8 +177,11 @@ function gtag_report_conversion(url) {
     {% endif %}
         <div class="block_overlay  {% if page_type == 'profile' %}hidden{% elif page_type == 'routes' %} routes n_profile hidden{% else %}hidden n_profile{% endif %}" onclick="close_open_curtain()"></div>
         <div class="wrapper_main{% if page.url == "landing_mover" %} is-container{% endif %}">
-
+            {% if page.url == "landing_mover" or page.url == 'landing_customer' %}
-            {% include 'blocks/b_header.html' %}
+              {% include 'blocks/n_header.html' %}
+            {% else %}
+              {% include 'blocks/b_header.html' %}
+            {% endif %}
 
                 <div class="cut_width_f_curtain close{% if page_type == 'profile' %}{% else %} n_profile{% endif %} right" onclick="reAdressClickOnbackrground(event,this)">
                     <div class="menu_buttons curtain right {% if page_type == 'profile' %}padding_remove {% if not mobile %}open{% else %}close{% endif %}{% else %} n_profile close{% endif %}" data-name="<img style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/burger.svg" %}'>">