TRI-283: start 768>

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;
 }

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;
+  }
+}

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;

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);
 }

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;

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: 20px;
-    padding-bottom: 20px;
-    padding-left: 27px;
     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;
+  }
+}

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%;
+  }
+}

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;

static/css/moover/presentation.css

@@ -12,8 +12,7 @@
 
 @media (max-width: 1304.98px) {
   .presentation {
-    margin-bottom: 120px;
+    margin-bottom: 118px;
-    margin-bottom: 138px;
   }
 }
 
@@ -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;

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;
+  }
+}

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;
+    left: 2px;
-    top: -9px;
+    top: -22px;
-    margin-bottom: 17px;
+    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;
+  }
+}

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-left: 15px;
-    margin-bottom: 35px;
+    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;
+  }
+}

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;
 }

styles/moover/about.scss

@@ -1,13 +1,17 @@
 .about {
   margin-bottom: 168px;
 
-   @media (min-width: 1720px) {
+  @media (min-width: 1720px) {
-     margin-bottom: 188px;
+    margin-bottom: 188px;
   }
 
-      @media (max-width: 1304.98px) {
+  @media (max-width: 1304.98px) {
-          margin-bottom: 138px;
+    margin-bottom: 138px;
-    }
+  }
+
+  @media (max-width: 991.98px) {
+    margin-bottom: 110px;
+  }
 
   .title {
     margin-bottom: 60px;
@@ -16,8 +20,12 @@
       margin-bottom: 49px;
     }
 
-        @media (max-width: 1304.98px) {
+    @media (max-width: 1304.98px) {
-          margin-bottom: 39px;
+      margin-bottom: 39px;
+    }
+
+    @media (max-width: 991.98px) {
+      margin-bottom: 48px;
     }
   }
 
@@ -25,6 +33,10 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
 
+
+    @media (max-width: 991.98px) {
+      display: block;
+    }
   }
 
   &__img {
@@ -39,8 +51,14 @@
       margin-top: 19px;
     }
 
-        @media (max-width: 1304.98px) {
+    @media (max-width: 1304.98px) {
-          margin-left: -10px;
+      margin-left: -10px;
+    }
+
+    @media (max-width: 991.98px) {
+      margin-left: 0;
+      margin-bottom: 49px;
+      display: block;
     }
   }
 
@@ -54,9 +72,20 @@
       padding-left: 21px;
     }
 
-        @media (max-width: 1304.98px) {
+    @media (max-width: 1304.98px) {
-          padding-left: 11px;
+      padding-left: 11px;
-          padding-top: 19px;
+      padding-top: 19px;
+    }
+
+    @media (max-width: 991.98px) {
+      padding: 0 8px;
+      text-align: center;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      clear: both;
     }
   }
 
@@ -64,9 +93,18 @@
     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;
+      }
     }
   }
 

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;
+    }
   }
 }

styles/moover/benefits.scss

@@ -5,14 +5,22 @@
     margin-bottom: 147px;
   }
 
-      @media (max-width: 1304.98px) {
+  @media (max-width: 1304.98px) {
-          margin-bottom: 101px;
+    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 {
@@ -51,9 +81,9 @@
       top: -33px;
     }
 
-        @media (max-width: 1304.98px) {
+    @media (max-width: 1304.98px) {
-          top: 20px;
+      top: 20px;
-          right: 0;
+      right: 0;
     }
   }
 

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,44 +106,51 @@
     @media (max-width: 991.98px) {
       display: none;
     }
-
-
   }
 
-
   .slick-list {
     overflow: visible;
+
+    @media (max-width: 767.98px) {
+      margin-bottom: 1px;
+      padding-left: 58px;
+    }
+  }
+
+  .slick-dots {
+    display: flex;
+    justify-content: center;
+
+    margin: 0;
+    padding: 1rem 0;
+
+    list-style-type: none;
+
+    li {
+      margin: 0 0.25rem;
+
+      @media (max-width: 767.98px) {
+        margin: 0 0.31rem;
+}
+    }
+
+    button {
+      display: block;
+      width: 8px;
+      height: 8px;
+      padding: 0;
+
+      border: none;
+      border-radius: 100%;
+      background-color: #D9D9D9;
+
+      text-indent: -9999px;
+    }
+
+    li.slick-active button {
+      background-color: var(--color-orange);
+    }
+
   }
 }
 
-.slick-dots {
-  display: flex;
-  justify-content: center;
-
-  margin: 0;
-  padding: 1rem 0;
-
-  list-style-type: none;
-
-  li {
-    margin: 0 0.25rem;
-  }
-
-  button {
-    display: block;
-    width: 8px;
-    height: 8px;
-    padding: 0;
-
-    border: none;
-    border-radius: 100%;
-    background-color: #D9D9D9;
-
-    text-indent: -9999px;
-  }
-
-  li.slick-active button {
-    background-color: var(--color-orange);
-  }
-
-}

styles/moover/chatterbox.scss

@@ -5,9 +5,16 @@
     margin-bottom: 180px;
   }
 
-    @media (max-width: 1304.98px) {
+  @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 {
     max-width: 1200px;
@@ -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 {

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: 20px;
-      padding-bottom: 20px;
-      padding-left: 27px;
       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;
+        }
       }
     }
   }

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%;
+      }
   }
 }

styles/moover/header.scss

@@ -5,17 +5,25 @@
   top: 0;
   width: 100vw;
   padding: 40px 5px;
+  transition: all 0.1s ease-in-out;
 
-      @media (max-width: 1304.98px) {
+  @media (max-width: 1304.98px) {
-        padding-top: 37px;
+    padding-top: 37px;
-        padding-bottom: 41px;
+    padding-bottom: 41px;
-    }
+  }
 
   @media (max-width: 991.98px) {
     padding-top: 19px;
     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;

styles/moover/presentation.scss

@@ -8,8 +8,7 @@
   }
 
   @media (max-width: 1304.98px) {
-    margin-bottom: 120px;
+    margin-bottom: 118px;
-    margin-bottom: 138px;
   }
 
   @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 {

styles/moover/root.scss

@@ -20,17 +20,17 @@
 
 @media (max-width: 991.98px) {
   .container {
-    width: 640px
+    width: 640px;
-    //max-width: 85vw;
+    max-width: 100vw;
   }
 }
 
-/*@media (max-width: 767.98px) {*/
+@media (max-width: 767.98px) {
-/*  .container {*/
+  .container {
-/*    margin: 0 15px;*/
+    margin: 0 16px;
-/*    width: auto*/
+    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) {
+  &--sm {
-  .is-container.wrapper_main {
+    @media (max-width: 767.98px) {
-    max-width: initial;
+      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;
+    }
+  }
+}
+
+

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;
+      left: 2px;
-      top: -9px;
+      top: -22px;
-      margin-bottom: 17px;
+      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;
+    }
   }
 }

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-left: 15px;
-      margin-bottom: 35px;
+      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,20 +81,24 @@
     margin-bottom: 120px;
 
     @media (min-width: 1720px) {
-      margin-bottom: 135px;
+      margin-bottom: 126px;
     }
 
-        @media (max-width: 1304.98px) {
+    @media (max-width: 1304.98px) {
-          margin-bottom: 123px;
+      margin-bottom: 106px;
+    }
+
+    @media (max-width: 991.98px) {
+      margin-bottom: 79px;
     }
 
 
     .title {
       margin-bottom: 51px;
 
-        @media (max-width: 1304.98px) {
+      @media (max-width: 1304.98px) {
-          margin-bottom: 39px;
+        margin-bottom: 39px;
-    }
+      }
     }
 
     .use__img {
@@ -89,12 +111,12 @@
         width: initial;
       }
 
-        @media (max-width: 1304.98px) {
+      @media (max-width: 1304.98px) {
-          margin-left: 0;
+        margin-left: 0;
-          margin-right: 0;
+        margin-right: 0;
-          max-width: 100%;
+        max-width: 100%;
-          width: 1120px;
+        width: 1120px;
-    }
+      }
 
     }
   }
@@ -104,6 +126,11 @@
       max-width: 75%;
       margin: 0 auto 22px;
     }
+
+    @media (max-width: 767.98px) {
+        max-width: 100%;
+      margin-bottom: 16px;
+      }
   }
 }
 

styles/moover/uses.scss

@@ -5,9 +5,13 @@
     margin-bottom: 136px;
   }
 
-      @media (max-width: 1304.98px) {
+  @media (max-width: 1304.98px) {
-          margin-bottom: 123px;
+    margin-bottom: 125px;
-    }
+  }
+
+  @media (max-width: 991.98px) {
+    margin-bottom: 100px;
+  }
 
   &__grid {
     text-align: left;
@@ -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 {
@@ -45,9 +63,9 @@
     max-width: 50%;
     margin: 0 auto 60px;
 
-        @media (max-width: 1304.98px) {
+    @media (max-width: 1304.98px) {
-          max-width: 70%;
+      max-width: 70%;
-          margin-bottom: 39px;
+      margin-bottom: 39px;
     }
   }
 

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>

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--sm'/> цена доставки почтовых<br class='br--sm'/>" %}
-              {% translate "сервисов и она устала искать в<br class='br--xxl'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %}
+              {% 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-1280.png" %}" media="(min-width: 1304px)"/>
-      <source srcset="{% static "img/png/use-1120.png" %}" media="(min-width: 1120px)"/>
+      <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>
@@ -244,112 +244,25 @@
   <section class="chatterbox">
     <div class="title">{% translate "Что о нас говорят люди" %}</div>
     <div class="chatterbox__slider slick-slider">
-            {% for media_item in page.get_media_items %}
+      {% for media_item in page.get_media_items %}
-              <div class="slick-slide">
+        <div class="slick-slide">
-                <div class="chatterbox__slide">
+          <div class="chatterbox__slide">
-                  <div class="chatterbox__vbtn"></div>
+            <div class="chatterbox__vbtn"></div>
-                  <div class="chatterbox__wrap">
+            <div class="chatterbox__wrap">
-                    <div class="chatterbox__vbox">
+              <div class="chatterbox__vbox">
-                      <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
+                <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
-                      <video
+                <video
-                          data-src="{{ MEDIA_URL }}{{ media_item.video }}"
+                    data-src="{{ MEDIA_URL }}{{ media_item.video }}"
-                          poster="{{ MEDIA_URL }}{{ media_item.picture }}"
+                    poster="{{ MEDIA_URL }}{{ media_item.picture }}"
-                          controls
+                    controls
-                          autoplay
+                    autoplay
-                      ></video>
+                ></video>
-                    </div>
-                  </div>
-                </div>
-
               </div>
-            {% endfor %}
+            </div>
-{#      <div class="slick-slide">#}
+          </div>
-{#        <div class="chatterbox__slide">#}
+
-{#          <div class="chatterbox__vbtn"></div>#}
+        </div>
-{#          <div class="chatterbox__wrap">#}
+      {% endfor %}
-{#            <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() {
-        $('.slick-slider')
+          console.log($('.slick-slider'))
-          .slick({
+          $('.slick-slider')
+            .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) {
+            .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
-            slick.$slides[currentSlide]?.querySelector('video')?.pause();
+              slick.$slides[currentSlide]?.querySelector('video')?.pause();
-            console.log('edge was hit', slick.$slides[currentSlide]);
+              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-1280.png" %}" media="(min-width: 1304px)"/>
-      <source srcset="{% static "img/png/use-letters-1120.png" %}" media="(min-width: 1120px)"/>
+      <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-1280.png" %}" media="(min-width: 1304px)"/>
-      <source srcset="{% static "img/png/sore-1120.png" %}" media="(min-width: 1120px)"/>
+      <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>