TRI-283: start 768>

2024-11-21 13:10:25 +03:00
parent b0db3534f2
commit e3adbeeea4
29 changed files with 1986 additions and 354 deletions
--- a/static/css/moover.css
+++ b/static/css/moover.css
--- a/static/css/moover/about.css
+++ b/static/css/moover/about.css
@@ -14,6 +14,12 @@
  }
 }

+@media (max-width: 991.98px) {
+  .about {
+    margin-bottom: 110px;
+  }
+}
+
 .about .title {
  margin-bottom: 60px;
 }
@@ -30,11 +36,23 @@
  }
 }

+@media (max-width: 991.98px) {
+  .about .title {
+    margin-bottom: 48px;
+  }
+}
+
 .about__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
 }

+@media (max-width: 991.98px) {
+  .about__grid {
+    display: block;
+  }
+}
+
 .about__img {
  box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC, inset -18.19px -1.21px 18.19px 0 #4052801A, 48.5px 36.38px 36.38px 0 #6B7F9933;
  border-radius: 31px;
@@ -54,6 +72,14 @@
  }
 }

+@media (max-width: 991.98px) {
+  .about__img {
+    margin-left: 0;
+    margin-bottom: 49px;
+    display: block;
+  }
+}
+
 .about__right {
  text-align: left;
  padding-top: 43px;
@@ -74,16 +100,42 @@
  }
 }

+@media (max-width: 991.98px) {
+  .about__right {
+    padding: 0 8px;
+    text-align: center;
+  }
+}
+
+.about__right::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
 .about__half {
  max-width: 50%;
  float: left;
 }

+@media (max-width: 991.98px) {
+  .about__half {
+    max-width: initial;
+  }
+}
+
 .about__half:last-child {
  padding-left: 16px;
  max-width: 47%;
 }

+@media (max-width: 991.98px) {
+  .about__half:last-child {
+    max-width: initial;
+    padding-left: 0;
+  }
+}
+
 .about b {
  letter-spacing: 0.4px;
 }
--- a/static/css/moover/animate.css
+++ b/static/css/moover/animate.css
@@ -21,6 +21,14 @@
  }
 }

+@media (max-width: 991.98px) {
+  .animate {
+    padding-top: 40px;
+    padding-bottom: 29px;
+    margin-bottom: 121px;
+  }
+}
+
 .animate.left {
  transform: translateX(-180px);
 }
@@ -29,9 +37,32 @@
  transform: translateX(180px);
 }

+.animate.right .title {
+  margin-bottom: 17px;
+}
+
@media (min-width: 1720px) {
  .animate.right .title {
    max-width: 80%;
+    margin-bottom: 40px;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .animate.right .title {
+    margin-bottom: 25px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .animate.right .title {
+    margin-bottom: 31px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .animate.right .subtitle {
+    margin-bottom: 31px;
  }
 }

@@ -58,6 +89,14 @@
  }
 }

+@media (max-width: 991.98px) {
+  .animate .title {
+    max-width: 85%;
+    font-size: 24px;
+    line-height: 29.05px;
+  }
+}
+
 .animate .subtitle {
  width: 47%;
  margin: 0 auto 23px;
@@ -76,3 +115,10 @@
    width: 54%;
  }
 }
+
+@media (max-width: 991.98px) {
+  .animate .subtitle {
+    width: 102%;
+    margin-bottom: 26px;
+  }
+}
--- a/static/css/moover/benefits.css
+++ b/static/css/moover/benefits.css
@@ -14,12 +14,24 @@
  }
 }

+@media (max-width: 991.98px) {
+  .benefits {
+    margin-bottom: 93px;
+  }
+}
+
 .benefits__grid {
  text-align: left;
  display: grid;
  grid-template-columns: 1.5fr 3fr 1.5fr;
 }

+@media (max-width: 991.98px) {
+  .benefits__grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 .benefits__item {
  min-height: 122px;
  padding-right: 7px;
@@ -32,6 +44,20 @@
  }
 }

+@media (max-width: 991.98px) {
+  .benefits__item {
+    padding-right: 25px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .benefits__second {
+    grid-column: 1 / 3;
+    order: -1;
+    margin-bottom: 56px;
+  }
+}
+
 .benefits__third {
  padding-left: 16px;
 }
@@ -43,6 +69,12 @@
  }
 }

+@media (max-width: 991.98px) {
+  .benefits__third {
+    padding-left: 11px;
+  }
+}
+
 .benefits .title {
  margin-bottom: 76px;
 }
@@ -53,6 +85,12 @@
  }
 }

+@media (max-width: 991.98px) {
+  .benefits .title {
+    margin-bottom: 19px;
+  }
+}
+
 .benefits img {
  position: relative;
  top: 14px;
--- a/static/css/moover/cards.css
+++ b/static/css/moover/cards.css
@@ -13,6 +13,13 @@
  }
 }

+@media (max-width: 767.98px) {
+  .cards__item {
+    max-width: 251px;
+    margin-right: 18px;
+  }
+}
+
 .cards__img {
  margin-bottom: 5px;
 }
@@ -24,12 +31,24 @@
  }
 }

+@media (max-width: 1304.98px) {
+  .cards__img {
+    margin-bottom: 8px;
+  }
+}
+
@media (max-width: 991.98px) {
  .cards__img {
    margin-bottom: 8px;
  }
 }

+@media (max-width: 767.98px) {
+  .cards__img {
+    margin-bottom: 10px;
+  }
+}
+
 .cards__img:hover {
  scale: 1.05;
  transition: scale 0.15s linear;
@@ -38,6 +57,12 @@
 .cards__desc {
  font-weight: 500;
  line-height: 22px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 7;
+  /* number of lines to show */
+  line-clamp: 7;
+  -webkit-box-orient: vertical;
 }

@media (min-width: 1720px) {
@@ -64,6 +89,12 @@
  }
 }

+.slick-active .cards__desc {
+  -webkit-line-clamp: initial;
+  /* number of lines to show */
+  line-clamp: initial;
+}
+
 .cards__desc a {
  color: var(--color-orange);
 }
@@ -100,7 +131,14 @@
  overflow: visible;
 }

-.slick-dots {
+@media (max-width: 767.98px) {
+  .cards .slick-list {
+    margin-bottom: 1px;
+    padding-left: 58px;
+  }
+}
+
+.cards .slick-dots {
  display: flex;
  justify-content: center;
  margin: 0;
@@ -108,11 +146,17 @@
  list-style-type: none;
 }

-.slick-dots li {
+.cards .slick-dots li {
  margin: 0 0.25rem;
 }

-.slick-dots button {
+@media (max-width: 767.98px) {
+  .cards .slick-dots li {
+    margin: 0 0.31rem;
+  }
+}
+
+.cards .slick-dots button {
  display: block;
  width: 8px;
  height: 8px;
@@ -123,6 +167,6 @@
  text-indent: -9999px;
 }

-.slick-dots li.slick-active button {
+.cards .slick-dots li.slick-active button {
  background-color: var(--color-orange);
 }
--- a/static/css/moover/chatterbox.css
+++ b/static/css/moover/chatterbox.css
@@ -10,7 +10,15 @@

@media (max-width: 1304.98px) {
  .chatterbox {
-    margin-bottom: 140px;
+    margin-bottom: 142px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .chatterbox {
+    margin-left: -50vw;
+    margin-right: -50vw;
+    margin-bottom: 122px;
  }
 }

@@ -31,6 +39,12 @@
  }
 }

+@media (max-width: 991.98px) {
+  .chatterbox__slider {
+    max-width: 720px;
+  }
+}
+
 .chatterbox__slide {
  width: 335px;
  height: 615px;
@@ -56,6 +70,14 @@
  }
 }

+@media (max-width: 991.98px) {
+  .chatterbox__slide {
+    width: 206px;
+    height: 377px;
+    background-size: 206px 377px;
+  }
+}
+
 .chatterbox__slide.loaded video {
  opacity: 1;
 }
@@ -128,6 +150,13 @@
  }
 }

+@media (max-width: 991.98px) {
+  .chatterbox__vbtn::before {
+    width: 48px;
+    height: 48px;
+  }
+}
+
 .chatterbox__vbtn::before, .chatterbox__vbtn::after {
  content: "";
  position: absolute;
@@ -152,6 +181,12 @@
  }
 }

+@media (max-width: 991.98px) {
+  .chatterbox__vbtn::after {
+    border-width: 10px 0 10px 14px;
+  }
+}
+
 .chatterbox__vbox {
  position: relative;
  display: flex;
@@ -172,6 +207,12 @@
  }
 }

+@media (max-width: 991.98px) {
+  .chatterbox__vbox {
+    height: 370px;
+  }
+}
+
 .chatterbox .title {
  margin-bottom: 60px;
 }
@@ -192,6 +233,15 @@
  }
 }

+@media (max-width: 991.98px) {
+  .chatterbox .slick-next {
+    width: 40px;
+    height: 40px;
+    background-size: 32%;
+    right: 5%;
+  }
+}
+
 .chatterbox .slick-prev {
  left: -40px;
 }
@@ -202,6 +252,21 @@
  }
 }

+@media (max-width: 991.98px) {
+  .chatterbox .slick-prev {
+    width: 40px;
+    height: 40px;
+    background-size: 32%;
+    left: 5%;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .chatterbox .slick-list {
+    overflow: visible;
+  }
+}
+
 .slick-slide:not(.slick-center) .chatterbox__slide {
  scale: 0.72;
 }
@@ -212,6 +277,12 @@
  }
 }

+@media (max-width: 991.98px) {
+  .slick-slide:not(.slick-center) .chatterbox__slide {
+    scale: 0.8;
+  }
+}
+
 .slick-center .chatterbox__vbtn {
  opacity: 1;
  pointer-events: initial;
--- a/static/css/moover/diff.css
+++ b/static/css/moover/diff.css
@@ -1,5 +1,5 @@
 .diff {
-  margin-bottom: 168px;
+  margin-bottom: 179px;
 }

@media (min-width: 1720px) {
@@ -20,6 +20,12 @@
  }
 }

+@media (max-width: 767.98px) {
+  .diff {
+    margin-bottom: 139px;
+  }
+}
+
 .diff .title {
  width: 60%;
  margin-bottom: 65px;
@@ -46,6 +52,13 @@
  }
 }

+@media (max-width: 767.98px) {
+  .diff .title {
+    width: 100%;
+    margin-bottom: 30px;
+  }
+}
+
 .diff__grid {
  display: flex;
  position: relative;
@@ -96,6 +109,12 @@
  margin-right: 29px;
 }

+@media (min-width: 1720px) {
+  .diff__coll.left {
+    margin-right: 12px;
+  }
+}
+
@media (max-width: 1304.98px) {
  .diff__coll.left {
    margin-right: 10px;
@@ -114,7 +133,13 @@

@media (min-width: 1720px) {
  .diff__coll.left .diff__coll-title {
-    padding-left: 24px;
+    padding-left: 2px;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .diff__coll.left .diff__coll-title {
+    padding-left: 0;
  }
 }

@@ -147,7 +172,13 @@

@media (min-width: 1720px) {
  .diff__coll.right .diff__coll-title {
-    padding-right: 24px;
+    padding-right: 0;
+  }
+}
+
+@media (max-width: 1304.98px) {
+  .diff__coll.right .diff__coll-title {
+    padding-right: 0;
  }
 }

@@ -173,6 +204,12 @@
  }
 }

+@media (max-width: 767.98px) {
+  .diff__coll-title {
+    margin-bottom: 29px;
+  }
+}
+
 .diff__item {
  position: relative;
  text-align: left;
@@ -193,11 +230,9 @@

@media (min-width: 1720px) {
  .diff__item {
-    padding-top: 22px;
-    padding-bottom: 20px;
-    padding-left: 27px;
+    padding: 20px;
    gap: 20px;
-    margin-bottom: 38px;
+    margin-bottom: 40px;
  }
 }

@@ -215,6 +250,15 @@
  }
 }

+@media (max-width: 767.98px) {
+  .diff__item {
+    font-size: 16px;
+    line-height: 19.36px;
+    padding-right: 15px;
+    margin-bottom: 14px;
+  }
+}
+
 .diff__item:last-child {
  margin-bottom: 0;
 }
@@ -249,6 +293,13 @@
  }
 }

+@media (max-width: 767.98px) {
+  .diff__status {
+    width: 35px;
+    height: 35px;
+  }
+}
+
 .diff__status::before {
  position: absolute;
  left: 50%;
@@ -273,6 +324,12 @@
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
 }

+@media (max-width: 767.98px) {
+  .diff__item--done .diff__status::before {
+    scale: 0.7;
+  }
+}
+
 .diff__item--error .diff__status {
  background-color: #F9CCCC;
 }
@@ -282,3 +339,9 @@
  height: 36px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
 }
+
+@media (max-width: 767.98px) {
+  .diff__item--error .diff__status::before {
+    scale: 0.7;
+  }
+}
--- a/static/css/moover/easy.css
+++ b/static/css/moover/easy.css
@@ -10,7 +10,7 @@

@media (max-width: 1304.98px) {
  .easy {
-    margin-bottom: 142px;
+    margin-bottom: 140px;
  }
 }

@@ -38,6 +38,13 @@
  }
 }

+@media (max-width: 767.98px) {
+  .easy .title {
+    max-width: 95%;
+    margin-bottom: 30px;
+  }
+}
+
 .easy .subtitle {
  margin-bottom: 41px;
 }
@@ -48,6 +55,13 @@
  }
 }

+@media (max-width: 767.98px) {
+  .easy .subtitle {
+    max-width: 90%;
+    margin: 0 auto 23px;
+  }
+}
+
 .easy__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
@@ -78,6 +92,12 @@
@media (max-width: 991.98px) {
  .easy__grid {
    display: block;
+    margin-bottom: 37px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .easy__grid {
    margin-bottom: 40px;
  }
 }
@@ -100,7 +120,6 @@
@media (min-width: 1720px) {
  .easy__item--fir {
    margin-right: -10px;
-    margin-left: 7px;
    padding-top: 31px;
  }
 }
@@ -115,7 +134,13 @@
  .easy__item--fir {
    padding-top: 17px;
    margin-right: 0;
-    margin-bottom: 43px;
+    margin-bottom: 49px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .easy__item--fir {
+    margin-bottom: 42px;
  }
 }

@@ -142,11 +167,26 @@
  padding-bottom: 0;
 }

+@media (min-width: 1720px) {
+  .easy__item--sec {
+    padding-left: 15px;
+  }
+}
+
@media (max-width: 991.98px) {
  .easy__item--sec {
    padding-top: 35px;
    padding-bottom: 37px;
-    margin-bottom: 39px;
+    margin-bottom: 46px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .easy__item--sec {
+    display: block;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 49px;
  }
 }

@@ -158,13 +198,15 @@

@media (min-width: 1720px) {
  .easy__item--sec img {
-    margin-right: -12px;
+    max-width: 53%;
  }
 }

@media (max-width: 1304.98px) {
  .easy__item--sec img {
-    max-width: 43.1%;
+    max-width: 42%;
+    margin-bottom: -4px;
+    margin-right: 0;
  }
 }

@@ -175,12 +217,27 @@
  }
 }

+@media (max-width: 767.98px) {
+  .easy__item--sec img {
+    max-width: 104%;
+    position: relative;
+    left: -6px;
+    top: -4px;
+  }
+}
+
 .easy__item--sec p {
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
 }

+@media (max-width: 767.98px) {
+  .easy__item--sec p {
+    margin-bottom: 22px;
+  }
+}
+
 .easy__item--thr {
  grid-area: c;
  display: flex;
@@ -191,6 +248,12 @@
  padding-bottom: 0;
 }

+@media (min-width: 1720px) {
+  .easy__item--thr {
+    padding-left: 15px;
+  }
+}
+
@media (max-width: 991.98px) {
  .easy__item--thr {
    padding-top: 42px;
@@ -198,6 +261,14 @@
  }
 }

+@media (max-width: 767.98px) {
+  .easy__item--thr {
+    display: block;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
 .easy__item--thr .img {
  margin-bottom: -10px;
  margin-right: 24px;
@@ -223,6 +294,13 @@
  }
 }

+@media (max-width: 767.98px) {
+  .easy__item--thr .img img {
+    display: block;
+    margin: 0 auto;
+  }
+}
+
 .easy__item--thr p {
  max-width: 50%;
  margin-bottom: 0;
@@ -236,6 +314,13 @@
  }
 }

+@media (max-width: 767.98px) {
+  .easy__item--thr p {
+    margin-bottom: 22px;
+    max-width: 100%;
+  }
+}
+
 .easy__arrow {
  width: 68px;
  height: 18px;
@@ -269,7 +354,7 @@

@media (min-width: 1720px) {
  .easy__arrow--fir {
-    right: 104%;
+    right: 105%;
    top: 34%;
  }
 }
@@ -288,7 +373,7 @@

@media (min-width: 1720px) {
  .easy__arrow--sec {
-    left: 46%;
+    left: 45%;
    top: 124%;
  }
 }
@@ -303,10 +388,25 @@
  margin-top: -21px;
 }

+@media (max-width: 1304.98px) {
+  .easy__btn {
+    margin-top: -20px;
+  }
+}
+
@media (max-width: 991.98px) {
  .easy__btn {
-    margin-top: -26px;
+    margin-top: -19px;
    padding-left: 54px;
    padding-right: 54px;
  }
 }
+
+@media (max-width: 767.98px) {
+  .easy__btn {
+    padding-left: 50px;
+    padding-right: 50px;
+    margin-top: -8px;
+    max-width: 100%;
+  }
+}
--- a/static/css/moover/header.css
+++ b/static/css/moover/header.css
@@ -5,6 +5,7 @@
  top: 0;
  width: 100vw;
  padding: 40px 5px;
+  transition: all 0.1s ease-in-out;
 }

@media (max-width: 1304.98px) {
@@ -21,6 +22,13 @@
  }
 }

+.header.scrolled {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  box-shadow: var(--box-shadow-primary);
+  border-bottom: 1px solid var(--color-grey);
+}
+
 .header__grid, .header__list {
  display: flex;
  align-items: center;
@@ -36,7 +44,7 @@

@media (max-width: 1304.98px) {
  .header__logo {
-    left: 14px;
+    left: 6px;
  }
 }

@@ -46,6 +54,12 @@
  }
 }

+@media (max-width: 767.98px) {
+  .header__logo {
+    left: -3px;
+  }
+}
+
 .header__nav {
  flex-grow: 1;
  max-width: 41%;
@@ -98,6 +112,12 @@
  left: -4px;
 }

+@media (max-width: 767.98px) {
+  .header .dropdown {
+    left: -8px;
+  }
+}
+
 .header .dropdown-content {
  right: 0;
  height: initial;
--- a/static/css/moover/presentation.css
+++ b/static/css/moover/presentation.css
@@ -12,8 +12,7 @@

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

@@ -60,6 +59,12 @@
  }
 }

+@media (max-width: 767.98px) {
+  .presentation__top {
+    margin-bottom: 77px;
+  }
+}
+
@media (max-width: 991.98px) {
  .presentation__bottom .subtitle {
    max-width: 40%;
@@ -67,6 +72,13 @@
  }
 }

+@media (max-width: 767.98px) {
+  .presentation__bottom .subtitle {
+    max-width: 65%;
+    margin-bottom: 21px;
+  }
+}
+
 .presentation__title {
  margin-bottom: 23px;
 }
@@ -78,6 +90,12 @@
  }
 }

+@media (max-width: 767.98px) {
+  .presentation__title {
+    margin-bottom: 15px;
+  }
+}
+
 .presentation__subtitle {
  margin-bottom: 41px;
  font-weight: 600;
@@ -91,6 +109,13 @@
  }
 }

+@media (max-width: 767.98px) {
+  .presentation__subtitle {
+    margin-bottom: 30px;
+    max-width: 77%;
+  }
+}
+
 .presentation__btn {
  margin-bottom: 40px;
 }
@@ -102,6 +127,12 @@
  }
 }

+@media (max-width: 767.98px) {
+  .presentation__btn {
+    margin-bottom: 30px;
+  }
+}
+
 .presentation__next {
  font-weight: 500;
  line-height: 22px;
--- a/static/css/moover/root.css
+++ b/static/css/moover/root.css
@@ -20,15 +20,17 @@
@media (max-width: 991.98px) {
  .container {
    width: 640px;
+    max-width: 100vw;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .container {
+    margin: 0 16px;
+    width: auto;
  }
 }

-/*@media (max-width: 767.98px) {*/
-/*  .container {*/
-/*    margin: 0 15px;*/
-/*    width: auto*/
-/*  }*/
-/*}*/
 :root {
  --color-primary: #FF613A;
  --color-white: #FFFFFF;
@@ -45,6 +47,25 @@

 body {
  overflow-x: hidden;
+  padding-top: 129px;
+}
+
+@media (max-width: 1304.98px) {
+  body {
+    padding-top: 126px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  body {
+    padding-top: 85px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  body {
+    padding-top: 57px;
+  }
 }

 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
@@ -106,10 +127,23 @@ p {
  }
 }

+@media (max-width: 991.98px) {
+  p {
+    margin-bottom: 18px;
+  }
+}
+
 b {
  font-weight: 500;
 }

+@media (max-width: 991.98px) {
+  b {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+
 .btn {
  display: inline-flex;
  text-decoration: none;
@@ -158,6 +192,12 @@ b {
  }
 }

+@media (max-width: 767.98px) {
+  .title {
+    margin-bottom: 14px;
+  }
+}
+
 .subtitle {
  margin-bottom: 81px;
  line-height: 22px;
@@ -181,7 +221,7 @@ b {
 }

 .hide__xxl {
-  display: initial;
+  display: inline-flex;
 }

@media (min-width: 1720px) {
@@ -191,7 +231,7 @@ b {
 }

 .hide__md {
-  display: initial;
+  display: inline-flex;
 }

@media (max-width: 991.98px) {
@@ -232,8 +272,31 @@ b {
  }
 }

+@media (max-width: 767.98px) {
+  .br--sm {
+    display: none;
+  }
+}
+
@media (min-width: 1440px) {
  .is-container.wrapper_main {
    max-width: initial;
  }
 }
+
+.is-container.wrapper_main > .container {
+  position: relative;
+  left: 15px;
+}
+
+@media (min-width: 1720px) {
+  .is-container.wrapper_main > .container {
+    left: 17px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .is-container.wrapper_main > .container {
+    left: 0;
+  }
+}
--- a/static/css/moover/sore.css
+++ b/static/css/moover/sore.css
@@ -15,23 +15,40 @@
  }
 }

+@media (max-width: 991.98px) {
+  .sore {
+    margin-bottom: 60px;
+  }
+}
+
 .sore__img {
-  margin: 0 auto 26px;
+  margin: 0 auto 13px;
  position: relative;
  left: -17px;
+  top: -13px;
 }

@media (min-width: 1720px) {
  .sore__img {
-    margin-bottom: 46px;
+    margin-bottom: 40px;
+    top: -5px;
+    left: -21px;
  }
 }

@media (max-width: 1304.98px) {
  .sore__img {
-    left: 4px;
-    top: -9px;
-    margin-bottom: 17px;
+    left: 2px;
+    top: -22px;
+    margin-bottom: 4px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .sore__img {
+    top: -8px;
+    left: -15px;
+    margin-bottom: 18px;
  }
 }

@@ -45,16 +62,21 @@
  }
 }

+@media (max-width: 991.98px) {
+  .sore .title {
+    margin-bottom: 20px;
+  }
+}
+
 .sore .subtitle {
  max-width: 62%;
-  margin: 0 auto -1px;
+  margin: 0 auto 10px;
 }

@media (min-width: 1720px) {
  .sore .subtitle {
    line-height: 26px;
    max-width: 60%;
-    margin-bottom: 5px;
  }
 }

@@ -64,6 +86,12 @@
  }
 }

+@media (max-width: 991.98px) {
+  .sore .subtitle {
+    max-width: 85%;
+  }
+}
+
 .sore .h3 {
  max-width: 47%;
  margin: 0 auto 19px;
@@ -80,3 +108,10 @@
    max-width: 50%;
  }
 }
+
+@media (max-width: 991.98px) {
+  .sore .h3 {
+    max-width: 65%;
+    margin-bottom: 21px;
+  }
+}
--- a/static/css/moover/use.css
+++ b/static/css/moover/use.css
@@ -10,7 +10,7 @@

@media (max-width: 1304.98px) {
  .use {
-    margin-bottom: 145px;
+    margin-bottom: 142px;
  }
 }

@@ -29,14 +29,16 @@
@media (min-width: 1720px) {
  .use__img {
    width: 50.2%;
-    margin-left: 27px;
-    margin-bottom: 35px;
+    margin-left: 15px;
+    margin-bottom: 46px;
  }
 }

@media (max-width: 1304.98px) {
  .use__img {
    width: 77%;
+    margin-left: 10px;
+    margin-bottom: 34px;
  }
 }

@@ -48,8 +50,23 @@
  }
 }

+@media (max-width: 767.98px) {
+  .use__img {
+    margin-bottom: 30px;
+  }
+}
+
 .use__btn {
  margin-bottom: 11px;
+  text-align: center;
+}
+
+@media (max-width: 767.98px) {
+  .use__btn {
+    max-width: 100%;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
 }

 .use__link {
@@ -72,7 +89,14 @@

@media (max-width: 991.98px) {
  .use .title {
-    margin-bottom: 38px;
+    margin-bottom: 40px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .use .title {
+    max-width: 100%;
+    margin-bottom: 29px;
  }
 }

@@ -82,13 +106,19 @@

@media (min-width: 1720px) {
  .use--lett {
-    margin-bottom: 135px;
+    margin-bottom: 126px;
  }
 }

@media (max-width: 1304.98px) {
  .use--lett {
-    margin-bottom: 123px;
+    margin-bottom: 106px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .use--lett {
+    margin-bottom: 79px;
  }
 }

@@ -130,3 +160,10 @@
    margin: 0 auto 22px;
  }
 }
+
+@media (max-width: 767.98px) {
+  .use .h3 {
+    max-width: 100%;
+    margin-bottom: 16px;
+  }
+}
--- a/static/css/moover/uses.css
+++ b/static/css/moover/uses.css
@@ -10,7 +10,13 @@

@media (max-width: 1304.98px) {
  .uses {
-    margin-bottom: 123px;
+    margin-bottom: 125px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .uses {
+    margin-bottom: 100px;
  }
 }

@@ -22,6 +28,13 @@
  /* width: 101.5%; */
 }

+@media (max-width: 991.98px) {
+  .uses__grid {
+    grid-template-columns: 1fr 1fr;
+    column-gap: 15px;
+  }
+}
+
 .uses__item {
  min-height: 50px;
  margin-bottom: 19px;
@@ -34,6 +47,18 @@
  }
 }

+@media (max-width: 991.98px) {
+  .uses__item {
+    padding-right: 0;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .uses__item p:last-child {
+    margin-bottom: 0;
+  }
+}
+
 .uses__icon {
  margin-bottom: 11px;
 }
--- a/styles/moover/about.scss
+++ b/styles/moover/about.scss
@@ -9,6 +9,10 @@
    margin-bottom: 138px;
  }

+  @media (max-width: 991.98px) {
+    margin-bottom: 110px;
+  }
+
  .title {
    margin-bottom: 60px;

@@ -19,12 +23,20 @@
    @media (max-width: 1304.98px) {
      margin-bottom: 39px;
    }
+
+    @media (max-width: 991.98px) {
+      margin-bottom: 48px;
+    }
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

+
+    @media (max-width: 991.98px) {
+      display: block;
+    }
  }

  &__img {
@@ -42,6 +54,12 @@
    @media (max-width: 1304.98px) {
      margin-left: -10px;
    }
+
+    @media (max-width: 991.98px) {
+      margin-left: 0;
+      margin-bottom: 49px;
+      display: block;
+    }
  }

  &__right {
@@ -58,15 +76,35 @@
      padding-left: 11px;
      padding-top: 19px;
    }
+
+    @media (max-width: 991.98px) {
+      padding: 0 8px;
+      text-align: center;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      clear: both;
+    }
  }

  &__half {
    max-width: 50%;
    float: left;

+    @media (max-width: 991.98px) {
+      max-width: initial;
+    }
+
    &:last-child {
      padding-left: 16px;
      max-width: 47%;
+
+      @media (max-width: 991.98px) {
+        max-width: initial;
+        padding-left: 0;
+      }
    }
  }

--- a/styles/moover/animate.scss
+++ b/styles/moover/animate.scss
@@ -16,6 +16,12 @@
    margin-bottom: 141px;
  }

+  @media (max-width: 991.98px) {
+    padding-top: 40px;
+    padding-bottom: 29px;
+    margin-bottom: 121px;
+  }
+
  &.left {
    transform: translateX(-180px);
  }
@@ -24,10 +30,29 @@
    transform: translateX(180px);

    .title {
+      margin-bottom: 17px;
+
      @media (min-width: 1720px) {
        max-width: 80%;
+        margin-bottom: 40px;
      }
+
+      @media (max-width: 1304.98px) {
+        margin-bottom: 25px;
      }
+
+            @media (max-width: 991.98px) {
+              margin-bottom: 31px;
+}
+    }
+
+    .subtitle {
+
+            @media (max-width: 991.98px) {
+              margin-bottom: 31px;
+}
+    }
+
  }

  &__link {
@@ -47,6 +72,12 @@
    @media (max-width: 1304.98px) {
      max-width: 99%;
    }
+
+    @media (max-width: 991.98px) {
+      max-width: 85%;
+      font-size: 24px;
+      line-height: 29.05px;
+    }
  }

  .subtitle {
@@ -62,5 +93,10 @@
    @media (max-width: 1304.98px) {
      width: 54%;
    }
+
+    @media (max-width: 991.98px) {
+      width: 102%;
+      margin-bottom: 26px;
+    }
  }
 }
--- a/styles/moover/benefits.scss
+++ b/styles/moover/benefits.scss
@@ -9,10 +9,18 @@
    margin-bottom: 101px;
  }

+  @media (max-width: 991.98px) {
+    margin-bottom: 93px;
+  }
+
  &__grid {
    text-align: left;
    display: grid;
    grid-template-columns: 1.5fr 3fr 1.5fr;
+
+    @media (max-width: 991.98px) {
+      grid-template-columns: 1fr 1fr;
+    }
  }

  &__item {
@@ -23,6 +31,20 @@
    @media (min-width: 1720px) {
      min-height: 145px;
    }
+
+    @media (max-width: 991.98px) {
+      padding-right: 25px;
+    }
+  }
+
+
+  &__second {
+
+    @media (max-width: 991.98px) {
+      grid-column: 1 / 3;
+      order: -1;
+      margin-bottom: 56px;
+    }
  }

  &__third {
@@ -32,6 +54,10 @@
      padding-left: 31px;
      margin-right: 5px;
    }
+
+    @media (max-width: 991.98px) {
+      padding-left: 11px;
+    }
  }

  .title {
@@ -40,6 +66,10 @@
    @media (min-width: 1720px) {
      margin-bottom: 93px;
    }
+
+    @media (max-width: 991.98px) {
+      margin-bottom: 19px;
+    }
  }

  img {
--- a/styles/moover/cards.scss
+++ b/styles/moover/cards.scss
@@ -11,6 +11,11 @@
    @media (max-width: 991.98px) {
      max-width: 270px;
    }
+
+    @media (max-width: 767.98px) {
+      max-width: 251px;
+      margin-right: 18px;
+    }
  }

  &__img {
@@ -21,10 +26,18 @@
      margin-bottom: 15px;
    }

+    @media (max-width: 1304.98px) {
+      margin-bottom: 8px;
+    }
+
    @media (max-width: 991.98px) {
      margin-bottom: 8px;
    }

+    @media (max-width: 767.98px) {
+      margin-bottom: 10px;
+    }
+
    &:hover {
      scale: 1.05;
      transition: scale 0.15s linear;
@@ -34,6 +47,11 @@
  &__desc {
    font-weight: 500;
    line-height: 22px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 7; /* number of lines to show */
+    line-clamp: 7;
+    -webkit-box-orient: vertical;

    @media (min-width: 1720px) {
      font-size: 20px;
@@ -53,12 +71,21 @@
      padding-right: 8px;
    }

+    @media (max-width: 767.98px) {
+      //padding-left: 5px;
+      //padding-right: 5px;
+    }
+
+    .slick-active & {
+      -webkit-line-clamp: initial; /* number of lines to show */
+      line-clamp: initial;
+    }
+
    a {
      color: var(--color-orange);
    }
  }

-
  &__arrow {
    width: 62px;
    height: 20px;
@@ -79,17 +106,18 @@
    @media (max-width: 991.98px) {
      display: none;
    }
-
-
  }

-
  .slick-list {
    overflow: visible;
-  }
-}

-.slick-dots {
+    @media (max-width: 767.98px) {
+      margin-bottom: 1px;
+      padding-left: 58px;
+    }
+  }
+
+  .slick-dots {
    display: flex;
    justify-content: center;

@@ -100,6 +128,10 @@

    li {
      margin: 0 0.25rem;
+
+      @media (max-width: 767.98px) {
+        margin: 0 0.31rem;
+}
    }

    button {
@@ -119,4 +151,6 @@
      background-color: var(--color-orange);
    }

+  }
 }
+
--- a/styles/moover/chatterbox.scss
+++ b/styles/moover/chatterbox.scss
@@ -6,7 +6,14 @@
  }

  @media (max-width: 1304.98px) {
-      margin-bottom: 140px;
+    margin-bottom: 142px;
+  }
+
+  @media (max-width: 991.98px) {
+    margin-left: -50vw;
+    margin-right: -50vw;
+    margin-bottom: 122px;
+    //max-width: 100vw;
  }

  &__slider {
@@ -20,6 +27,12 @@
    @media (max-width: 1304.98px) {
      max-width: 1100px;
    }
+
+    @media (max-width: 991.98px) {
+      max-width: 720px;
+      //position: relative;
+
+    }
  }

  &__slide {
@@ -42,6 +55,12 @@
      background-size: 308px 565px;
    }

+    @media (max-width: 991.98px) {
+      width: 206px;
+      height: 377px;
+      background-size: 206px 377px;
+    }
+
    &.loaded {
      video {
        opacity: 1;
@@ -110,6 +129,11 @@
        width: 109px;
        height: 109px;
      }
+
+      @media (max-width: 991.98px) {
+        width: 48px;
+        height: 48px;
+      }
    }

    &::before,
@@ -133,6 +157,11 @@
        border-width: 23px 0 23px 35px;
        margin-left: 4px;
      }
+
+      @media (max-width: 991.98px) {
+        border-width: 10px 0 10px 14px;
+
+      }
    }
  }

@@ -150,6 +179,10 @@
    @media (max-width: 1304.98px) {
      height: 530px;
    }
+
+    @media (max-width: 991.98px) {
+      height: 370px;
+    }
  }

  .title {
@@ -166,6 +199,13 @@
    @media (max-width: 1304.98px) {
      right: -10px;
    }
+
+    @media (max-width: 991.98px) {
+      width: 40px;
+      height: 40px;
+      background-size: 32%;
+      right: 5%;
+    }
  }

  .slick-prev {
@@ -174,7 +214,21 @@
    @media (max-width: 1304.98px) {
      left: -10px;
    }
+
+    @media (max-width: 991.98px) {
+      width: 40px;
+      height: 40px;
+      background-size: 32%;
+      left: 5%;
    }
+  }
+
+  .slick-list {
+    @media (max-width: 991.98px) {
+      overflow: visible;
+    }
+  }
+
 }

 .slick-slide:not(.slick-center) .chatterbox__slide {
@@ -183,6 +237,10 @@
  @media (max-width: 1304.98px) {
    scale: 0.69;
  }
+
+  @media (max-width: 991.98px) {
+    scale: 0.8;
+  }
 }

 .slick-center {
--- a/styles/moover/diff.scss
+++ b/styles/moover/diff.scss
@@ -1,5 +1,5 @@
 .diff {
-  margin-bottom: 168px;
+  margin-bottom: 179px;

  @media (min-width: 1720px) {
    margin-bottom: 172px;
@@ -13,6 +13,10 @@
    margin-bottom: 125px;
  }

+  @media (max-width: 767.98px) {
+    margin-bottom: 139px;
+  }
+
  .title {
    width: 60%;
    margin-bottom: 65px;
@@ -31,6 +35,11 @@
      width: 90%;
      margin-bottom: 40px;
    }
+
+    @media (max-width: 767.98px) {
+      width: 100%;
+      margin-bottom: 30px;
+    }
  }

  &__grid {
@@ -72,6 +81,9 @@

    &.left {
      margin-right: 29px;
+      @media (min-width: 1720px) {
+        margin-right: 12px;
+      }

      @media (max-width: 1304.98px) {
        margin-right: 10px;
@@ -85,7 +97,11 @@
        padding-left: 39px;

        @media (min-width: 1720px) {
-          padding-left: 24px;
+          padding-left: 2px;
+        }
+
+        @media (max-width: 1304.98px) {
+          padding-left: 0;
        }

        @media (max-width: 991.98px) {
@@ -110,12 +126,19 @@
        padding-right: 39px;

        @media (min-width: 1720px) {
-          padding-right: 24px;
+          padding-right: 0;
+        }
+        @media (max-width: 1304.98px) {
+          padding-right: 0;
        }

        @media (max-width: 991.98px) {
          padding-right: 0;
        }
+
+        @media (max-width: 767.98px) {
+          //margin-bottom: 29px;
+        }
      }
    }

@@ -131,6 +154,10 @@
    @media (max-width: 991.98px) {
      margin-bottom: 19px;
    }
+
+    @media (max-width: 767.98px) {
+      margin-bottom: 29px;
+    }
  }

  &__item {
@@ -151,11 +178,9 @@
    cursor: default;

    @media (min-width: 1720px) {
-      padding-top: 22px;
-      padding-bottom: 20px;
-      padding-left: 27px;
+      padding: 20px;
      gap: 20px;
-      margin-bottom: 38px;
+      margin-bottom: 40px;
    }

    @media (max-width: 1304.98px) {
@@ -168,6 +193,13 @@
      padding-bottom: 9px;
    }

+    @media (max-width: 767.98px) {
+      font-size: 16px;
+      line-height: 19.36px;
+      padding-right: 15px;
+      margin-bottom: 14px;
+    }
+
    &:last-child {
      margin-bottom: 0;
    }
@@ -180,7 +212,6 @@
    }
  }

-
  &__status {
    position: relative;
    height: 48px;
@@ -200,6 +231,11 @@
      border-radius: 11px;
    }

+    @media (max-width: 767.98px) {
+      width: 35px;
+      height: 35px;
+    }
+
    &::before {
      position: absolute;
      left: 50%;
@@ -220,7 +256,11 @@
      &::before {
        width: 26px;
        height: 26px;
-        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
+
+        @media (max-width: 767.98px) {
+          scale: 0.7;
+        }
      }
    }

@@ -230,7 +270,11 @@
      &::before {
        width: 36px;
        height: 36px;
-        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
+
+        @media (max-width: 767.98px) {
+          scale: 0.7;
+        }
      }
    }
  }
--- a/styles/moover/easy.scss
+++ b/styles/moover/easy.scss
@@ -6,7 +6,7 @@
  }

  @media (max-width: 1304.98px) {
-    margin-bottom: 142px;
+    margin-bottom: 140px;
  }

  @media (max-width: 991.98px) {
@@ -26,6 +26,11 @@
    @media (max-width: 991.98px) {
      max-width: 75%;
    }
+
+    @media (max-width: 767.98px) {
+      max-width: 95%;
+      margin-bottom: 30px;
+    }
  }

  .subtitle {
@@ -34,6 +39,11 @@
    @media (min-width: 1720px) {
      margin-bottom: 59px;
    }
+
+    @media (max-width: 767.98px) {
+      max-width: 90%;
+      margin: 0 auto 23px;
+    }
  }

  &__grid {
@@ -62,6 +72,10 @@

    @media (max-width: 991.98px) {
      display: block;
+      margin-bottom: 37px;
+    }
+
+    @media (max-width: 767.98px) {
      margin-bottom: 40px;
    }
  }
@@ -81,7 +95,6 @@

      @media (min-width: 1720px) {
        margin-right: -10px;
-        margin-left: 7px;
        padding-top: 31px;
      }

@@ -92,7 +105,11 @@
      @media (max-width: 991.98px) {
        padding-top: 17px;
        margin-right: 0;
-        margin-bottom: 43px;
+        margin-bottom: 49px;
+      }
+
+      @media (max-width: 767.98px) {
+        margin-bottom: 42px;
      }

      p {
@@ -116,11 +133,21 @@
      padding-top: 0;
      padding-bottom: 0;

+      @media (min-width: 1720px) {
+        padding-left: 15px;
+      }
+
      @media (max-width: 991.98px) {
        padding-top: 35px;
        padding-bottom: 37px;
+        margin-bottom: 46px;
+      }

-        margin-bottom: 39px;
+      @media (max-width: 767.98px) {
+        display: block;
+        padding-top: 0;
+        padding-bottom: 0;
+        margin-bottom: 49px;
      }

      img {
@@ -129,23 +156,36 @@
        max-width: 50.1%;

        @media (min-width: 1720px) {
-          margin-right: -12px;
+          max-width: 53%;
        }

        @media (max-width: 1304.98px) {
-          max-width: 43.1%;
+          max-width: 42%;
+          margin-bottom: -4px;
+          margin-right: 0;
        }

        @media (max-width: 991.98px) {
          margin-right: 0;
          margin-bottom: 0;
        }
+
+        @media (max-width: 767.98px) {
+          max-width: 104%;
+          position: relative;
+          left: -6px;
+          top: -4px;
+        }
      }

      p {
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
+
+        @media (max-width: 767.98px) {
+          margin-bottom: 22px;
+        }
      }
    }

@@ -159,11 +199,21 @@
      padding-bottom: 0;
      //background-color: #00a420;

+      @media (min-width: 1720px) {
+        padding-left: 15px;
+      }
+
      @media (max-width: 991.98px) {
        padding-top: 42px;
        padding-bottom: 46px;
      }

+      @media (max-width: 767.98px) {
+        display: block;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
      .img {
        margin-bottom: -10px;
        margin-right: 24px;
@@ -181,6 +231,14 @@
          margin-right: 0;
          max-width: 34%;
        }
+
+        img {
+
+          @media (max-width: 767.98px) {
+            display: block;
+            margin: 0 auto;
+          }
+        }
      }

      p {
@@ -192,6 +250,11 @@
        @media (max-width: 991.98px) {
          max-width: 60%;
        }
+
+        @media (max-width: 767.98px) {
+          margin-bottom: 22px;
+          max-width: 100%;
+        }
      }
    }
  }
@@ -220,7 +283,7 @@
      right: 101%;

      @media (min-width: 1720px) {
-        right: 104%;
+        right: 105%;
        top: 34%;
      }
      @media (max-width: 1304.98px) {
@@ -234,7 +297,7 @@
      transform: rotate(90deg);

      @media (min-width: 1720px) {
-        left: 46%;
+        left: 45%;
        top: 124%;
      }

@@ -247,10 +310,21 @@
  &__btn {
    margin-top: -21px;

+    @media (max-width: 1304.98px) {
+      margin-top: -20px;
+    }
+
    @media (max-width: 991.98px) {
-      margin-top: -26px;
+      margin-top: -19px;
      padding-left: 54px;
      padding-right: 54px;
    }
+
+    @media (max-width: 767.98px) {
+      padding-left: 50px;
+      padding-right: 50px;
+      margin-top: -8px;
+      max-width: 100%;
+      }
  }
 }
--- a/styles/moover/header.scss
+++ b/styles/moover/header.scss
@@ -5,6 +5,7 @@
  top: 0;
  width: 100vw;
  padding: 40px 5px;
+  transition: all 0.1s ease-in-out;

  @media (max-width: 1304.98px) {
    padding-top: 37px;
@@ -16,6 +17,13 @@
    padding-bottom: 19px;
  }

+  &.scrolled {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    box-shadow: var(--box-shadow-primary);
+    border-bottom: 1px solid var(--color-grey);
+  }
+
  &__grid,
  &__list {
    display: flex;
@@ -33,12 +41,16 @@
    left: 5px;

    @media (max-width: 1304.98px) {
-      left: 14px;
+      left: 6px;
    }

    @media (max-width: 991.98px) {
      left: 0;
    }
+
+    @media (max-width: 767.98px) {
+      left: -3px;
+    }
  }

  &__nav {
@@ -84,6 +96,10 @@
  .dropdown {
    left: -4px;

+    @media (max-width: 767.98px) {
+      left: -8px;
+    }
+
    &-content {
      right: 0;
      height: initial;
--- a/styles/moover/presentation.scss
+++ b/styles/moover/presentation.scss
@@ -8,8 +8,7 @@
  }

  @media (max-width: 1304.98px) {
-    margin-bottom: 120px;
-    margin-bottom: 138px;
+    margin-bottom: 118px;
  }

  @media (max-width: 991.98px) {
@@ -63,14 +62,24 @@
      padding-top: 31px;
      margin-bottom: 76px;
    }
+
+    @media (max-width: 767.98px) {
+      margin-bottom: 77px;
+}
  }

  &__bottom {
+
    .subtitle {
      @media (max-width: 991.98px) {
        max-width: 40%;
        margin: 0 auto 30px;
      }
+
+      @media (max-width: 767.98px) {
+max-width: 65%;
+        margin-bottom: 21px;
+}
    }
  }

@@ -81,6 +90,10 @@
      max-width: 75%;
      margin: 0 auto 19px;
    }
+
+    @media (max-width: 767.98px) {
+      margin-bottom: 15px;
+}
  }

  &__subtitle {
@@ -91,8 +104,12 @@
      max-width: 55%;
      margin: 0 auto 40px;
      font-size: 16px;
-
    }
+
+    @media (max-width: 767.98px) {
+      margin-bottom: 30px;
+      max-width: 77%;
+}
  }

  &__btn {
@@ -102,6 +119,10 @@
      padding-left: 82px;
      padding-right: 82px;
    }
+
+    @media (max-width: 767.98px) {
+      margin-bottom: 30px;
+}
  }

  &__next {
@@ -128,6 +149,10 @@
    @media (max-width: 1304.98px) {
      max-width: 1140px;
    }
+
+    @media (max-width: 767.98px) {
+      //padding-left: 58px;
+}
  }

  &__bottom .presentation__title {
--- a/styles/moover/root.scss
+++ b/styles/moover/root.scss
@@ -20,17 +20,17 @@

@media (max-width: 991.98px) {
  .container {
-    width: 640px
-    //max-width: 85vw;
+    width: 640px;
+    max-width: 100vw;
  }
 }

-/*@media (max-width: 767.98px) {*/
-/*  .container {*/
-/*    margin: 0 15px;*/
-/*    width: auto*/
-/*  }*/
-/*}*/
+@media (max-width: 767.98px) {
+  .container {
+    margin: 0 16px;
+    width: auto;
+  }
+}

 :root {
  --color-primary: #FF613A;
@@ -51,6 +51,19 @@

 body {
  overflow-x: hidden;
+
+  padding-top: 129px;
+
+  @media (max-width: 1304.98px) {
+    padding-top: 126px;
+  }
+  @media (max-width: 991.98px) {
+    padding-top: 85px;
+  }
+
+  @media (max-width: 767.98px) {
+    padding-top: 57px;
+  }
 }

 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
@@ -86,7 +99,7 @@ h3, .h3 {

  @media (max-width: 1304.98px) {
    margin-bottom: 13px;
-}
+  }
 }

 h4, .h4 {
@@ -103,10 +116,19 @@ p {
    font-size: 20px;
    line-height: 26px;
  }
+
+  @media (max-width: 991.98px) {
+    margin-bottom: 18px;
+  }
 }

 b {
  font-weight: 500;
+
+  @media (max-width: 991.98px) {
+    font-size: 16px;
+    line-height: 22px;
+  }
 }


@@ -150,6 +172,10 @@ b {
    font-size: 32px;
    line-height: 38.73px;
  }
+
+  @media (max-width: 767.98px) {
+    margin-bottom: 14px;
+}
 }

 .subtitle {
@@ -172,7 +198,7 @@ b {
  display: none;

  &__xxl {
-    display: initial;
+    display: inline-flex;

    @media (min-width: 1720px) {
      display: none;
@@ -180,7 +206,7 @@ b {
  }

  &__md {
-    display: initial;
+    display: inline-flex;

    @media (max-width: 991.98px) {
      display: none;
@@ -219,11 +245,32 @@ b {
      display: none;
    }
  }
-}

-@media (min-width: 1440px) {
-  .is-container.wrapper_main {
-    max-width: initial;
+  &--sm {
+    @media (max-width: 767.98px) {
+      display: none;
+    }
  }
 }

+.is-container.wrapper_main {
+
+  @media (min-width: 1440px) {
+    max-width: initial;
+  }
+
+  & > .container {
+    position: relative;
+    left: 15px;
+
+    @media (min-width: 1720px) {
+      left: 17px;
+    }
+
+    @media (max-width: 767.98px) {
+      left: 0;
+    }
+  }
+}
+
+
--- a/styles/moover/sore.scss
+++ b/styles/moover/sore.scss
@@ -10,19 +10,32 @@
    margin-bottom: 140px;
  }

+  @media (max-width: 991.98px) {
+    margin-bottom: 60px;
+  }
+
  &__img {
-    margin: 0 auto 26px;
+    margin: 0 auto 13px;
    position: relative;
    left: -17px;
+    top: -13px;

    @media (min-width: 1720px) {
-      margin-bottom: 46px;
+      margin-bottom: 40px;
+      top: -5px;
+      left: -21px;
    }

    @media (max-width: 1304.98px) {
-      left: 4px;
-      top: -9px;
-      margin-bottom: 17px;
+      left: 2px;
+      top: -22px;
+      margin-bottom: 4px;
+    }
+
+    @media (max-width: 991.98px) {
+      top: -8px;
+      left: -15px;
+      margin-bottom: 18px;
    }
  }

@@ -32,22 +45,29 @@
    @media (min-width: 1720px) {
      margin-bottom: 61px;
    }
+
+    @media (max-width: 991.98px) {
+      margin-bottom: 20px;
+    }
  }


  .subtitle {
    max-width: 62%;
-    margin: 0 auto -1px;
+    margin: 0 auto 10px;

    @media (min-width: 1720px) {
      line-height: 26px;
      max-width: 60%;
-      margin-bottom: 5px;
    }

    @media (max-width: 1304.98px) {
      max-width: 65%;
    }
+
+    @media (max-width: 991.98px) {
+      max-width: 85%;
+    }
  }

  .h3 {
@@ -61,5 +81,10 @@
    @media (max-width: 1304.98px) {
      max-width: 50%;
    }
+
+    @media (max-width: 991.98px) {
+      max-width: 65%;
+      margin-bottom: 21px;
+    }
  }
 }
--- a/styles/moover/use.scss
+++ b/styles/moover/use.scss
@@ -6,7 +6,7 @@
  }

  @media (max-width: 1304.98px) {
-    margin-bottom: 145px;
+    margin-bottom: 142px;
  }

  @media (max-width: 991.98px) {
@@ -20,12 +20,14 @@

    @media (min-width: 1720px) {
      width: 50.2%;
-      margin-left: 27px;
-      margin-bottom: 35px;
+      margin-left: 15px;
+      margin-bottom: 46px;
    }

    @media (max-width: 1304.98px) {
      width: 77%;
+      margin-left: 10px;
+      margin-bottom: 34px;
    }

    @media (max-width: 991.98px) {
@@ -33,10 +35,21 @@
      width: 100%;
      margin-bottom: 40px;
    }
+
+    @media (max-width: 767.98px) {
+      margin-bottom: 30px;
+    }
  }

  &__btn {
    margin-bottom: 11px;
+    text-align: center;
+
+    @media (max-width: 767.98px) {
+        max-width: 100%;
+      padding-left: 50px;
+      padding-right: 50px;
+      }
  }

  &__link {
@@ -55,7 +68,12 @@
    }

    @media (max-width: 991.98px) {
-      margin-bottom: 38px;
+      margin-bottom: 40px;
+    }
+
+    @media (max-width: 767.98px) {
+      max-width: 100%;
+      margin-bottom: 29px;
    }
  }

@@ -63,11 +81,15 @@
    margin-bottom: 120px;

    @media (min-width: 1720px) {
-      margin-bottom: 135px;
+      margin-bottom: 126px;
    }

    @media (max-width: 1304.98px) {
-          margin-bottom: 123px;
+      margin-bottom: 106px;
+    }
+
+    @media (max-width: 991.98px) {
+      margin-bottom: 79px;
    }


@@ -104,6 +126,11 @@
      max-width: 75%;
      margin: 0 auto 22px;
    }
+
+    @media (max-width: 767.98px) {
+        max-width: 100%;
+      margin-bottom: 16px;
+      }
  }
 }

--- a/styles/moover/uses.scss
+++ b/styles/moover/uses.scss
@@ -6,7 +6,11 @@
  }

  @media (max-width: 1304.98px) {
-          margin-bottom: 123px;
+    margin-bottom: 125px;
+  }
+
+  @media (max-width: 991.98px) {
+    margin-bottom: 100px;
  }

  &__grid {
@@ -16,7 +20,10 @@
    /* max-width: 101.5%; */
    /* width: 101.5%; */

-
+    @media (max-width: 991.98px) {
+      grid-template-columns: 1fr 1fr;
+      column-gap: 15px;
+    }
  }


@@ -28,6 +35,17 @@
    @media (min-width: 1720px) {
      margin-bottom: 22px;
    }
+
+    @media (max-width: 991.98px) {
+      padding-right: 0;
+    }
+
+    p:last-child {
+      @media (max-width: 991.98px) {
+        margin-bottom: 0;
+      }
+    }
+
  }

  &__icon {
--- a/templates/blocks/n_header.html
+++ b/templates/blocks/n_header.html
@@ -2,7 +2,6 @@
 {% load base_tags_extra %}
 {% load webpush_notifications %}

-</div>
 <header class="header">
  <div class="header__grid container">
    <div class="header__logo">
@@ -55,15 +54,11 @@
 	var activeClassname = 'scrolled';
 	var $document = $(document);
 	var headerTop = $('.header');
-    console.log('dfsdfdsfsdfsdfsdfsfsfsfsdfsdf')
 		var header = $('.header');
 		$(window).off('scroll.header').on('scroll.header', function() {
 			var scrollTop = $document.scrollTop();
 			var headerHeight = header.outerHeight();
-			var headerHeightTop = headerTop.outerHeight();
-			var top = headerHeight - headerHeightTop - 20;
 			if (scrollTop > headerHeight) {
-        console.log(scrollTop, top)
 				headerTop.addClass(activeClassname);
 				$(document.body).addClass(activeClassname);
 			} else {
@@ -76,5 +71,4 @@
 $(document).ready(()=>{
  initHeaderState();
 })
-  console.log($,'sdsdads')
 </script>
--- a/templates/pages/p_mover_landing_page.html
+++ b/templates/pages/p_mover_landing_page.html
@@ -47,8 +47,8 @@
            <div class="cards__arrow"></div>
            <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 br--md'/> посылку." %}
+              {% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl br--sm'/> цена доставки почтовых<br class='br--sm'/>" %}
+              {% translate "сервисов и она устала искать в<br class='br--xxl br--sm'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %}
            </p>
          </div>
          <div class="cards__item">
@@ -56,22 +56,22 @@
            <img class="cards__img" src="{% static "img/webp/image2.webp" %}" alt="img1"/>
            <p class="cards__desc">

-              {% translate "Мария, узнаёт о нашем сервисе<br class='br1'/>" %}
+              {% translate "Мария, узнаёт о нашем сервисе<br class='br--sm'/>" %}
              <a href="/">TripWB.com. </a>
-              {% translate "Регистрируется<br class='br--xxl'/> и очень быстро размещает<br class='br--xxl'/> объявление." %}
+              {% translate "Регистрируется<br class='br--xxl br--sm'/> и очень быстро размещает<br class='br--xxl' br--sm/> объявление." %}
            </p>
          </div>
          <div class="cards__item">
            <div class="cards__arrow"></div>
            <img class="cards__img" src="{% static "img/webp/image3.webp" %}" alt="img1"/>
            <p class="cards__desc">
-              {% translate "Попутчик Егор увидел<br class='br--xxl'/> объявление Марии, нажал<br class='br--xxl'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br--xxl'/> удобным для него способом." %}
+              {% translate "Попутчик Егор увидел<br class='br--xxl br--sm'/> объявление Марии, нажал<br class='br--xxl br--sm'/> откликнуться и получил<br class='br--sm'/> возможность связаться с ней,<br class='br--xxl br--sm'/> удобным для него способом." %}
            </p>
          </div>
          <div class="cards__item">
            <img class="cards__img" src="{% static "img/webp/image4.webp" %}" alt="img1"/>
            <p class="cards__desc">
-              {% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br--xxl'/> чего Мария передала посылку<br class='br--xxl'/> Егору и он её доставил." %}
+              {% translate "Мария и Егор обговорили детали<br class='br--sm'/> доставки и потом встретились в<br class='br--sm'/> удобном для всех месте. После<br class='br--xxl br--sm'/> чего Мария передала посылку<br class='br--xxl br--sm'/> Егору и он её доставил." %}
            </p>
          </div>
        </div>
@@ -172,8 +172,8 @@
    <div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
    <picture class="img">
      <source srcset="{% static "img/png/use-1720.png" %}" media="(min-width: 1720px)"/>
-      <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-1280.png" %}" media="(min-width: 1304px)"/>
+      <source srcset="{% static "img/png/use-1120.png" %}" media="(min-width: 1280px)"/>
      <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>
@@ -263,93 +263,6 @@

        </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="/ava1.jpg" alt="user" class="chatterbox__poster">#}
-{#              <video#}
-{#                  data-src="/media/media_items/video/1.mp4"#}
-{#                  poster="/ava1.jpg"#}
-{#                  controls#}
-{#                  autoplay#}
-{#              ></video>#}
-{#            </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/2.mp4"#}
-{#                  poster="/ava2.jpg"#}
-{#                  controls#}
-{#                  autoplay#}
-{#              ></video>#}
-{#            </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="/ava3.jpg" alt="user" class="chatterbox__poster">#}
-{#              <video#}
-{#                  data-src="/media/media_items/video/3.mp4"#}
-{#                  poster="/ava3.jpg"#}
-{#                  controls#}
-{#                  autoplay#}
-{#              >#}
-{#              </video>#}
-{#            </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="/ava1.jpg" alt="user" class="chatterbox__poster">#}
-{#              <video#}
-{#                  data-src="/media/media_items/video/4.mp4"#}
-{#                  poster="/ava1.jpg"#}
-{#                  controls#}
-{#                  autoplay#}
-{#              >#}
-{#              </video>#}
-{#            </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 () {
@@ -370,22 +283,25 @@
          };
        }

-        handlerVideos();
+        function initSlider() {
+          console.log($('.slick-slider'))
          $('.slick-slider')
-          .slick({
+            .not('.slick-initialized').slick({
            centerMode: true,
            draggable: false,
-            {#centerPadding: '160px',#}
            slidesToShow: 3,
            infinite: false,
            initialSlide: 1,
-            {#lazyLoad: 'ondemand',#}
-            {#lazyLoad: 'progressive',#}
          })
            .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
              slick.$slides[currentSlide]?.querySelector('video')?.pause();
              console.log('edge was hit', slick.$slides[currentSlide]);
            });
+        }
+
+        handlerVideos();
+        initSlider();
+
      });
    </script>
  </section>
@@ -393,8 +309,8 @@
    <div class="title">{% translate "Что о нас пишут люди" %}</div>
    <picture>
      <source srcset="{% static "img/png/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
-      <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-1280.png" %}" media="(min-width: 1304px)"/>
+      <source srcset="{% static "img/png/use-letters-1120.png" %}" media="(min-width: 1280px)"/>
      <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>
@@ -452,7 +368,7 @@
        <p class="about__half">{% translate "Если не&nbsp;хочешь размещать объявление и&nbsp;ждать, то&nbsp;можешь <b>самостоятельно на&nbsp;нашем сайте найти перевозчика</b> через удобную систему поиска" %}</p>
      </div>
    </div>
-    {#    </div>#}
+
  </section>
  <section class="benefits" id="benefits">
    <div class="title">{% translate "Преимущества сервиса" %}</div>
@@ -556,8 +472,8 @@
    </div>
    <picture>
      <source srcset="{% static "img/png/sore-1720.png" %}" media="(min-width: 1720px)"/>
-      <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-1280.png" %}" media="(min-width: 1304px)"/>
+      <source srcset="{% static "img/png/sore-1120.png" %}" media="(min-width: 1280px)"/>
      <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>