TRI-283: end adaptive 1920 + start header

static/css/moover.css

@@ -58,6 +58,13 @@ h2, .h2 {
   margin-bottom: 10px;
 }
 
+@media (min-width: 1720px) {
+  h2, .h2 {
+    font-size: 28px;
+    margin-bottom: 20px;
+  }
+}
+
 h3, .h3 {
   font-size: 20px;
   line-height: 28px;
@@ -75,6 +82,13 @@ p {
   margin-bottom: 20px;
 }
 
+@media (min-width: 1720px) {
+  p {
+    font-size: 20px;
+    line-height: 26px;
+  }
+}
+
 b {
   font-weight: 500;
 }
@@ -109,7 +123,7 @@ b {
 
 @media (min-width: 1720px) {
   .title {
-    font-size: 44px;
+    font-size: 48px;
     margin-bottom: 22px;
   }
 }
@@ -122,7 +136,7 @@ b {
 @media (min-width: 1720px) {
   .subtitle {
     font-size: 20px;
-    margin-bottom: 97px;
+    margin-bottom: 105px;
   }
 }
 
@@ -130,10 +144,33 @@ b {
   display: none;
 }
 
+.hide__xxl {
+  display: block;
+}
+
+@media (min-width: 1720px) {
+  .hide__xxl {
+    display: none;
+  }
+}
+
+.show__xxl {
+  display: none;
+}
+
+@media (min-width: 1720px) {
+  .show__xxl {
+    display: block;
+  }
+}
+
 @media (min-width: 1440px) {
   .is-container.wrapper_main {
     max-width: initial;
   }
+  .br--xxl {
+    display: none;
+  }
 }
 
 .presentation {
@@ -144,6 +181,7 @@ b {
   .presentation {
     margin-left: 0;
     margin-right: 0;
+    margin-bottom: 160px;
   }
 }
 
@@ -155,7 +193,7 @@ b {
   background-image: url(/static/img/png/Box9.png), url(/static/img/png/Box10.png), url(/static/img/png/Box11.png), url(/static/img/png/Box12.png);
   background-position: top -4px left 46px, top -30px right -14px, bottom 73px left 278px, bottom 71px right 276px;
   background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
-  background-size: 17.5%,21.8%,8.5%,8.8%;
+  background-size: 17.5%, 21.8%, 8.5%, 8.8%;
 }
 
 @media (min-width: 1720px) {
@@ -191,6 +229,23 @@ b {
   animation: jump 2s ease-in-out infinite;
 }
 
+.presentation__cards {
+  max-width: 1300px;
+  margin: 0 auto;
+}
+
+@media (min-width: 1720px) {
+  .presentation__cards {
+    max-width: initial;
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+}
+
+.presentation__bottom .presentation__title {
+  margin-bottom: 13px;
+}
+
 @keyframes jump {
   0% {
     transform: translateY(0px);
@@ -212,15 +267,6 @@ b {
   }
 }
 
-.presentation__bottom .presentation__title {
-  margin-bottom: 13px;
-}
-
-.presentation__cards {
-  max-width: 1300px;
-  margin: 0 auto;
-}
-
 .cards__list {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -239,11 +285,31 @@ b {
   margin-bottom: 5px;
 }
 
+@media (min-width: 1720px) {
+  .cards__img {
+    width: 100%;
+    margin-bottom: 15px;
+  }
+}
+
 .cards__desc {
   font-weight: 500;
   line-height: 22px;
 }
 
+@media (min-width: 1720px) {
+  .cards__desc {
+    font-size: 20px;
+    line-height: 26px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+.cards__desc a {
+  color: var(--color-orange);
+}
+
 .cards__arrow {
   width: 62px;
   height: 20px;
@@ -253,19 +319,45 @@ b {
   background-image: url("/static/img/svg/Arrow23.svg");
 }
 
+@media (min-width: 1720px) {
+  .cards__arrow {
+    right: -45px;
+    top: -29px;
+  }
+}
+
 .easy {
   margin-bottom: 162px;
 }
 
+@media (min-width: 1720px) {
+  .easy {
+    margin-bottom: 180px;
+  }
+}
+
 .easy .title {
   max-width: 55%;
   margin-bottom: 21px;
 }
 
+@media (min-width: 1720px) {
+  .easy .title {
+    max-width: 45%;
+    margin-bottom: 23px;
+  }
+}
+
 .easy .subtitle {
   margin-bottom: 41px;
 }
 
+@media (min-width: 1720px) {
+  .easy .subtitle {
+    margin-bottom: 59px;
+  }
+}
+
 .easy__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -276,6 +368,15 @@ b {
   margin-bottom: 46px;
 }
 
+@media (min-width: 1720px) {
+  .easy__grid {
+    grid-column-gap: 147px;
+    grid-template-rows: repeat(2, minmax(245px, auto));
+    grid-row-gap: 136px;
+    margin-bottom: 63px;
+  }
+}
+
 .easy__item {
   border-radius: 30px;
   background-color: var(--color-grey);
@@ -291,19 +392,31 @@ b {
   padding-bottom: 0;
 }
 
+@media (min-width: 1720px) {
+  .easy__item--fir {
+    margin-right: -10px;
+    margin-left: 7px;
+    padding-top: 31px;
+  }
+}
+
 .easy__item--fir p {
   width: 93%;
   margin-bottom: 29px;
 }
 
-.easy__item--sec img {
+@media (min-width: 1720px) {
-  margin-bottom: -10px;
+  .easy__item--fir p {
-  margin-right: -5px;
+    width: 89%;
+    margin-bottom: 53px;
+  }
 }
 
-.easy__item--thr img {
+.easy__item--thr {
-  margin-bottom: -10px;
+  grid-area: c;
-  margin-right: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .easy__item--sec {
@@ -314,20 +427,20 @@ b {
   justify-content: space-between;
 }
 
-.easy__item--sec p,
+.easy__item--sec img {
-.easy__item--thr p,
+  margin-bottom: -10px;
-.easy__item--sec,
+  margin-right: -5px;
-.easy__item--thr {
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
 }
 
-.easy__item--thr {
+@media (min-width: 1720px) {
-  grid-area: c;
+  .easy__item--sec img {
-  display: flex;
+    margin-right: -12px;
-  align-items: center;
+  }
-  justify-content: space-between;
+}
+
+.easy__item--thr img {
+  margin-bottom: -10px;
+  margin-right: 24px;
 }
 
 .easy__item--thr p {
@@ -342,30 +455,71 @@ b {
   z-index: 1;
 }
 
+@media (min-width: 1720px) {
+  .easy__arrow {
+    scale: 1.4;
+  }
+}
+
 .easy__arrow--fir {
   top: 46%;
   right: 101%;
 }
 
+@media (min-width: 1720px) {
+  .easy__arrow--fir {
+    right: 104%;
+    top: 34%;
+  }
+}
+
 .easy__arrow--sec {
   top: 117%;
   left: 30%;
   transform: rotate(90deg);
 }
 
+@media (min-width: 1720px) {
+  .easy__arrow--sec {
+    left: 46%;
+    top: 124%;
+  }
+}
+
 .easy__btn {
   margin-top: -21px;
 }
 
+.easy__item--sec p,
+.easy__item--thr p,
+.easy__item--sec,
+.easy__item--thr {
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .chatterbox {
   margin-bottom: 160px;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox {
+    margin-bottom: 180px;
+  }
+}
+
 .chatterbox__slider {
   max-width: 1200px;
   margin: 0 auto;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__slider {
+    max-width: 1640px;
+  }
+}
+
 .chatterbox__slide {
   width: 335px;
   height: 615px;
@@ -375,6 +529,14 @@ b {
   position: relative;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__slide {
+    width: 456px;
+    height: 836px;
+    background-size: 456px 836px;
+  }
+}
+
 .chatterbox__slide.loaded video {
   opacity: 1;
 }
@@ -407,6 +569,12 @@ b {
   overflow: hidden;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__wrap {
+    border-radius: 50px;
+  }
+}
+
 .chatterbox__vbtn {
   position: absolute;
   left: 0;
@@ -434,6 +602,13 @@ b {
   transition: opacity 100ms linear;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__vbtn::before {
+    width: 109px;
+    height: 109px;
+  }
+}
+
 .chatterbox__vbtn::before, .chatterbox__vbtn::after {
   content: "";
   position: absolute;
@@ -451,6 +626,13 @@ b {
   margin-left: 2px;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__vbtn::after {
+    border-width: 23px 0 23px 35px;
+    margin-left: 4px;
+  }
+}
+
 .chatterbox__vbox {
   position: relative;
   display: flex;
@@ -459,6 +641,12 @@ b {
   height: 600px;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__vbox {
+    height: 827px;
+  }
+}
+
 .chatterbox .title {
   margin-bottom: 60px;
 }
@@ -490,12 +678,25 @@ b {
   margin-bottom: 123px;
 }
 
+@media (min-width: 1720px) {
+  .use {
+    margin-bottom: 184px;
+  }
+}
+
 .use__img {
   width: 67.5%;
   margin-left: 16px;
   margin-bottom: 31px;
 }
 
+@media (min-width: 1720px) {
+  .use__img {
+    width: 50.2%;
+    margin-left: 27px;
+  }
+}
+
 .use__btn {
   margin-bottom: 11px;
 }
@@ -512,21 +713,22 @@ b {
   margin-bottom: 49px;
 }
 
-.use--diff .title {
+@media (min-width: 1720px) {
-  width: 60%;
+  .use .title {
-  margin-bottom: 60px;
+    max-width: 40%;
-}
+  }
-
-.use--diff .use__img {
-  width: 100%;
-  margin-left: 0;
-  margin-bottom: 17px;
 }
 
 .use--lett {
   margin-bottom: 120px;
 }
 
+@media (min-width: 1720px) {
+  .use--lett {
+    margin-bottom: 140px;
+  }
+}
+
 .use--lett .title {
   margin-bottom: 51px;
 }
@@ -538,6 +740,172 @@ b {
   width: 1290px;
 }
 
+@media (min-width: 1720px) {
+  .use--lett .use__img {
+    width: initial;
+  }
+}
+
+.diff {
+  margin-bottom: 166px;
+}
+
+@media (min-width: 1720px) {
+  .diff {
+    margin-bottom: 172px;
+  }
+}
+
+.diff .title {
+  width: 60%;
+  margin-bottom: 65px;
+}
+
+@media (min-width: 1720px) {
+  .diff .title {
+    width: 49%;
+    margin-bottom: 60px;
+  }
+}
+
+.diff__grid {
+  display: flex;
+  position: relative;
+  margin-bottom: 30px;
+}
+
+.diff__grid::before {
+  content: '';
+  position: absolute;
+  height: 96%;
+  width: 5px;
+  border-radius: 5px;
+  background-color: #EDEDED;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+}
+
+.diff__coll {
+  width: 50%;
+}
+
+.diff__coll.left {
+  margin-right: 29px;
+}
+
+.diff__coll.left .diff__coll-title {
+  padding-left: 39px;
+}
+
+@media (min-width: 1720px) {
+  .diff__coll.left .diff__coll-title {
+    padding-left: 24px;
+  }
+}
+
+.diff__coll.right {
+  margin-left: 29px;
+}
+
+.diff__coll.right .diff__coll-title {
+  padding-right: 39px;
+}
+
+@media (min-width: 1720px) {
+  .diff__coll.right .diff__coll-title {
+    padding-right: 24px;
+  }
+}
+
+.diff__coll-title {
+  margin-bottom: 38px;
+}
+
+.diff__item {
+  position: relative;
+  text-align: left;
+  padding-left: 10px;
+  padding-top: 11px;
+  padding-bottom: 11px;
+  display: flex;
+  gap: 11px;
+  align-items: center;
+  background-color: #FFFFFF;
+  border-radius: 15px;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 28px;
+  margin-bottom: 35px;
+  cursor: default;
+}
+
+@media (min-width: 1720px) {
+  .diff__item {
+    padding-top: 22px;
+    padding-bottom: 20px;
+    padding-left: 27px;
+    gap: 20px;
+    margin-bottom: 38px;
+  }
+}
+
+.diff__item:last-child {
+  margin-bottom: 0;
+}
+
+.diff__item:hover .diff__status::before {
+  scale: 1.2;
+}
+
+.diff__status {
+  position: relative;
+  height: 48px;
+  width: 48px;
+  border-radius: 5px;
+  flex-shrink: 0;
+}
+
+@media (min-width: 1720px) {
+  .diff__status {
+    border-radius: 12px;
+  }
+}
+
+.diff__status::before {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: 0% 15%;
+}
+
+.diff__status::before {
+  content: '';
+  width: 36px;
+  height: 36px;
+}
+
+.diff__item--done .diff__status {
+  background-color: #CCF9D9;
+}
+
+.diff__item--done .diff__status::before {
+  width: 26px;
+  height: 26px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
+}
+
+.diff__item--error .diff__status {
+  background-color: #F9CCCC;
+}
+
+.diff__item--error .diff__status::before {
+  width: 36px;
+  height: 36px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
+}
+
 .animate {
   padding: 60px 40px 49px;
   opacity: 0;
@@ -547,6 +915,14 @@ b {
   margin-bottom: 160px;
 }
 
+@media (min-width: 1720px) {
+  .animate {
+    padding-top: 100px;
+    padding-bottom: 89px;
+    margin-bottom: 180px;
+  }
+}
+
 .animate.left {
   transform: translateX(-180px);
 }
@@ -555,6 +931,12 @@ b {
   transform: translateX(180px);
 }
 
+@media (min-width: 1720px) {
+  .animate.right .title {
+    max-width: 80%;
+  }
+}
+
 .animate__link {
   color: var(--color-orange);
   text-decoration: underline !important;
@@ -566,19 +948,45 @@ b {
   /*width: 90%;*/
 }
 
+@media (min-width: 1720px) {
+  .animate .title {
+    margin-bottom: 40px;
+  }
+}
+
 .animate .subtitle {
   width: 47%;
   margin: 0 auto 23px;
 }
 
+@media (min-width: 1720px) {
+  .animate .subtitle {
+    line-height: 26px;
+    letter-spacing: 0.1px;
+    margin-bottom: 40px;
+  }
+}
+
 .about {
   margin-bottom: 168px;
 }
 
+@media (min-width: 1720px) {
+  .about {
+    margin-bottom: 188px;
+  }
+}
+
 .about .title {
   margin-bottom: 60px;
 }
 
+@media (min-width: 1720px) {
+  .about .title {
+    margin-bottom: 49px;
+  }
+}
+
 .about__grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -587,16 +995,29 @@ b {
 .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;
-  margin-left: 8px;
+  margin-left: -20px;
   margin-top: 8px;
 }
 
+@media (min-width: 1720px) {
+  .about__img {
+    margin-top: 19px;
+  }
+}
+
 .about__right {
   text-align: left;
   padding-top: 43px;
   padding-left: 50px;
 }
 
+@media (min-width: 1720px) {
+  .about__right {
+    padding-top: 90px;
+    padding-left: 21px;
+  }
+}
+
 .about__half {
   max-width: 50%;
   float: left;
@@ -611,10 +1032,29 @@ b {
   letter-spacing: 0.4px;
 }
 
+@media (min-width: 1720px) {
+  .about b {
+    font-weight: 700;
+    letter-spacing: 0;
+  }
+}
+
+@media (min-width: 1720px) {
+  .about p {
+    margin-bottom: 39px;
+  }
+}
+
 .benefits {
   margin-bottom: 132px;
 }
 
+@media (min-width: 1720px) {
+  .benefits {
+    margin-bottom: 147px;
+  }
+}
+
 .benefits__grid {
   text-align: left;
   display: grid;
@@ -627,24 +1067,61 @@ b {
   margin-bottom: 22px;
 }
 
+@media (min-width: 1720px) {
+  .benefits__item {
+    min-height: 145px;
+  }
+}
+
 .benefits__third {
   padding-left: 16px;
 }
 
+@media (min-width: 1720px) {
+  .benefits__third {
+    padding-left: 31px;
+    margin-right: 5px;
+  }
+}
+
 .benefits .title {
   margin-bottom: 76px;
 }
 
+@media (min-width: 1720px) {
+  .benefits .title {
+    margin-bottom: 93px;
+  }
+}
+
 .benefits img {
   position: relative;
   top: 14px;
   right: -11px;
 }
 
+@media (min-width: 1720px) {
+  .benefits img {
+    top: -33px;
+  }
+}
+
+@media (min-width: 1720px) {
+  .benefits h2 {
+    margin-bottom: 10px;
+  }
+}
+
 .uses {
   margin-bottom: 122px;
 }
 
+@media (min-width: 1720px) {
+  .uses {
+    margin-bottom: 136px;
+  }
+}
+
 .uses__grid {
   text-align: left;
   display: grid;
@@ -659,10 +1136,24 @@ b {
   padding: 0 50px 0 2px;
 }
 
+@media (min-width: 1720px) {
+  .uses__item {
+    margin-bottom: 22px;
+  }
+}
+
 .uses__icon {
   margin-bottom: 11px;
 }
 
+@media (min-width: 1720px) {
+  .uses__icon {
+    width: 147px;
+    height: 147px;
+    margin-bottom: 20px;
+  }
+}
+
 .uses .title {
   max-width: 50%;
   margin: 0 auto 60px;
@@ -672,22 +1163,54 @@ b {
   margin-bottom: 160px;
 }
 
+@media (min-width: 1720px) {
+  .sore {
+    margin-bottom: 178px;
+  }
+}
+
 .sore__img {
   margin: 0 auto 26px;
   position: relative;
   left: -17px;
 }
 
+@media (min-width: 1720px) {
+  .sore__img {
+    margin-bottom: 46px;
+  }
+}
+
 .sore .title {
   margin-bottom: 40px;
 }
 
+@media (min-width: 1720px) {
+  .sore .title {
+    margin-bottom: 61px;
+  }
+}
+
 .sore .subtitle {
   max-width: 62%;
   margin: 0 auto -1px;
 }
 
+@media (min-width: 1720px) {
+  .sore .subtitle {
+    line-height: 26px;
+    max-width: 60%;
+    margin-bottom: 5px;
+  }
+}
+
 .sore .h3 {
   max-width: 47%;
   margin: 0 auto 19px;
 }
+
+@media (min-width: 1720px) {
+  .sore .h3 {
+    max-width: 38%;
+  }
+}

static/css/moover/about.css

@@ -0,0 +1,77 @@
+.about {
+  margin-bottom: 168px;
+}
+
+@media (min-width: 1720px) {
+  .about {
+    margin-bottom: 188px;
+  }
+}
+
+.about .title {
+  margin-bottom: 60px;
+}
+
+@media (min-width: 1720px) {
+  .about .title {
+    margin-bottom: 49px;
+  }
+}
+
+.about__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.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;
+  margin-left: -20px;
+  margin-top: 8px;
+}
+
+@media (min-width: 1720px) {
+  .about__img {
+    margin-top: 19px;
+  }
+}
+
+.about__right {
+  text-align: left;
+  padding-top: 43px;
+  padding-left: 50px;
+}
+
+@media (min-width: 1720px) {
+  .about__right {
+    padding-top: 90px;
+    padding-left: 21px;
+  }
+}
+
+.about__half {
+  max-width: 50%;
+  float: left;
+}
+
+.about__half:last-child {
+  padding-left: 16px;
+  max-width: 47%;
+}
+
+.about b {
+  letter-spacing: 0.4px;
+}
+
+@media (min-width: 1720px) {
+  .about b {
+    font-weight: 700;
+    letter-spacing: 0;
+  }
+}
+
+@media (min-width: 1720px) {
+  .about p {
+    margin-bottom: 39px;
+  }
+}

static/css/moover/animate.css

@@ -7,6 +7,14 @@
   margin-bottom: 160px;
 }
 
+@media (min-width: 1720px) {
+  .animate {
+    padding-top: 100px;
+    padding-bottom: 89px;
+    margin-bottom: 180px;
+  }
+}
+
 .animate.left {
   transform: translateX(-180px);
 }
@@ -15,6 +23,12 @@
   transform: translateX(180px);
 }
 
+@media (min-width: 1720px) {
+  .animate.right .title {
+    max-width: 80%;
+  }
+}
+
 .animate__link {
   color: var(--color-orange);
   text-decoration: underline !important;
@@ -26,7 +40,21 @@
   /*width: 90%;*/
 }
 
+@media (min-width: 1720px) {
+  .animate .title {
+    margin-bottom: 40px;
+  }
+}
+
 .animate .subtitle {
   width: 47%;
   margin: 0 auto 23px;
 }
+
+@media (min-width: 1720px) {
+  .animate .subtitle {
+    line-height: 26px;
+    letter-spacing: 0.1px;
+    margin-bottom: 40px;
+  }
+}

static/css/moover/benefits.css

@@ -2,6 +2,12 @@
   margin-bottom: 132px;
 }
 
+@media (min-width: 1720px) {
+  .benefits {
+    margin-bottom: 147px;
+  }
+}
+
 .benefits__grid {
   text-align: left;
   display: grid;
@@ -14,16 +20,47 @@
   margin-bottom: 22px;
 }
 
+@media (min-width: 1720px) {
+  .benefits__item {
+    min-height: 145px;
+  }
+}
+
 .benefits__third {
   padding-left: 16px;
 }
 
+@media (min-width: 1720px) {
+  .benefits__third {
+    padding-left: 31px;
+    margin-right: 5px;
+  }
+}
+
 .benefits .title {
   margin-bottom: 76px;
 }
 
+@media (min-width: 1720px) {
+  .benefits .title {
+    margin-bottom: 93px;
+  }
+}
+
 .benefits img {
   position: relative;
   top: 14px;
   right: -11px;
 }
+
+@media (min-width: 1720px) {
+  .benefits img {
+    top: -33px;
+  }
+}
+
+@media (min-width: 1720px) {
+  .benefits h2 {
+    margin-bottom: 10px;
+  }
+}

static/css/moover/cards.css

@@ -0,0 +1,58 @@
+.cards__list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.cards__item {
+  position: relative;
+}
+
+.cards__img:hover {
+  scale: 1.05;
+  transition: scale 0.15s linear;
+}
+
+.cards__img {
+  margin-bottom: 5px;
+}
+
+@media (min-width: 1720px) {
+  .cards__img {
+    width: 100%;
+    margin-bottom: 15px;
+  }
+}
+
+.cards__desc {
+  font-weight: 500;
+  line-height: 22px;
+}
+
+@media (min-width: 1720px) {
+  .cards__desc {
+    font-size: 20px;
+    line-height: 26px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+.cards__desc a {
+  color: var(--color-orange);
+}
+
+.cards__arrow {
+  width: 62px;
+  height: 20px;
+  position: absolute;
+  right: -30px;
+  top: -21px;
+  background-image: url("/static/img/svg/Arrow23.svg");
+}
+
+@media (min-width: 1720px) {
+  .cards__arrow {
+    right: -45px;
+    top: -29px;
+  }
+}

static/css/moover/chatterbox.css

@@ -2,11 +2,23 @@
   margin-bottom: 160px;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox {
+    margin-bottom: 180px;
+  }
+}
+
 .chatterbox__slider {
   max-width: 1200px;
   margin: 0 auto;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__slider {
+    max-width: 1640px;
+  }
+}
+
 .chatterbox__slide {
   width: 335px;
   height: 615px;
@@ -16,6 +28,14 @@
   position: relative;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__slide {
+    width: 456px;
+    height: 836px;
+    background-size: 456px 836px;
+  }
+}
+
 .chatterbox__slide.loaded video {
   opacity: 1;
 }
@@ -48,6 +68,12 @@
   overflow: hidden;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__wrap {
+    border-radius: 50px;
+  }
+}
+
 .chatterbox__vbtn {
   position: absolute;
   left: 0;
@@ -75,6 +101,13 @@
   transition: opacity 100ms linear;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__vbtn::before {
+    width: 109px;
+    height: 109px;
+  }
+}
+
 .chatterbox__vbtn::before, .chatterbox__vbtn::after {
   content: "";
   position: absolute;
@@ -92,6 +125,13 @@
   margin-left: 2px;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__vbtn::after {
+    border-width: 23px 0 23px 35px;
+    margin-left: 4px;
+  }
+}
+
 .chatterbox__vbox {
   position: relative;
   display: flex;
@@ -100,6 +140,12 @@
   height: 600px;
 }
 
+@media (min-width: 1720px) {
+  .chatterbox__vbox {
+    height: 827px;
+  }
+}
+
 .chatterbox .title {
   margin-bottom: 60px;
 }

static/css/moover/diff.css

@@ -0,0 +1,159 @@
+.diff {
+  margin-bottom: 166px;
+}
+
+@media (min-width: 1720px) {
+  .diff {
+    margin-bottom: 172px;
+  }
+}
+
+.diff .title {
+  width: 60%;
+  margin-bottom: 65px;
+}
+
+@media (min-width: 1720px) {
+  .diff .title {
+    width: 49%;
+    margin-bottom: 60px;
+  }
+}
+
+.diff__grid {
+  display: flex;
+  position: relative;
+  margin-bottom: 30px;
+}
+
+.diff__grid::before {
+  content: '';
+  position: absolute;
+  height: 96%;
+  width: 5px;
+  border-radius: 5px;
+  background-color: #EDEDED;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+}
+
+.diff__coll {
+  width: 50%;
+}
+
+.diff__coll.left {
+  margin-right: 29px;
+}
+
+.diff__coll.left .diff__coll-title {
+  padding-left: 39px;
+}
+
+@media (min-width: 1720px) {
+  .diff__coll.left .diff__coll-title {
+    padding-left: 24px;
+  }
+}
+
+.diff__coll.right {
+  margin-left: 29px;
+}
+
+.diff__coll.right .diff__coll-title {
+  padding-right: 39px;
+}
+
+@media (min-width: 1720px) {
+  .diff__coll.right .diff__coll-title {
+    padding-right: 24px;
+  }
+}
+
+.diff__coll-title {
+  margin-bottom: 38px;
+}
+
+.diff__item {
+  position: relative;
+  text-align: left;
+  padding-left: 10px;
+  padding-top: 11px;
+  padding-bottom: 11px;
+  display: flex;
+  gap: 11px;
+  align-items: center;
+  background-color: #FFFFFF;
+  border-radius: 15px;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 28px;
+  margin-bottom: 35px;
+  cursor: default;
+}
+
+@media (min-width: 1720px) {
+  .diff__item {
+    padding-top: 22px;
+    padding-bottom: 20px;
+    padding-left: 27px;
+    gap: 20px;
+    margin-bottom: 38px;
+  }
+}
+
+.diff__item:last-child {
+  margin-bottom: 0;
+}
+
+.diff__item:hover .diff__status::before {
+  scale: 1.2;
+}
+
+.diff__status {
+  position: relative;
+  height: 48px;
+  width: 48px;
+  border-radius: 5px;
+  flex-shrink: 0;
+}
+
+@media (min-width: 1720px) {
+  .diff__status {
+    border-radius: 12px;
+  }
+}
+
+.diff__status::before {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: 0% 15%;
+}
+
+.diff__status::before {
+  content: '';
+  width: 36px;
+  height: 36px;
+}
+
+.diff__item--done .diff__status {
+  background-color: #CCF9D9;
+}
+
+.diff__item--done .diff__status::before {
+  width: 26px;
+  height: 26px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
+}
+
+.diff__item--error .diff__status {
+  background-color: #F9CCCC;
+}
+
+.diff__item--error .diff__status::before {
+  width: 36px;
+  height: 36px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
+}

static/css/moover/easy.css

@@ -0,0 +1,172 @@
+.easy {
+  margin-bottom: 162px;
+}
+
+@media (min-width: 1720px) {
+  .easy {
+    margin-bottom: 180px;
+  }
+}
+
+.easy .title {
+  max-width: 55%;
+  margin-bottom: 21px;
+}
+
+@media (min-width: 1720px) {
+  .easy .title {
+    max-width: 45%;
+    margin-bottom: 23px;
+  }
+}
+
+.easy .subtitle {
+  margin-bottom: 41px;
+}
+
+@media (min-width: 1720px) {
+  .easy .subtitle {
+    margin-bottom: 59px;
+  }
+}
+
+.easy__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: repeat(2, minmax(186px, auto));
+  grid-template-areas: 'a  b' 'a  c';
+  grid-column-gap: 20px;
+  grid-row-gap: 80px;
+  margin-bottom: 46px;
+}
+
+@media (min-width: 1720px) {
+  .easy__grid {
+    grid-column-gap: 147px;
+    grid-template-rows: repeat(2, minmax(245px, auto));
+    grid-row-gap: 136px;
+    margin-bottom: 63px;
+  }
+}
+
+.easy__item {
+  border-radius: 30px;
+  background-color: var(--color-grey);
+  /*background-color: #a72525;*/
+  text-align: left;
+  padding: 21px;
+  box-shadow: var(--box-shadow-primary);
+}
+
+.easy__item--fir {
+  grid-area: a;
+  margin-right: 60px;
+  padding-bottom: 0;
+}
+
+@media (min-width: 1720px) {
+  .easy__item--fir {
+    margin-right: -10px;
+    margin-left: 7px;
+    padding-top: 31px;
+  }
+}
+
+.easy__item--fir p {
+  width: 93%;
+  margin-bottom: 29px;
+}
+
+@media (min-width: 1720px) {
+  .easy__item--fir p {
+    width: 89%;
+    margin-bottom: 53px;
+  }
+}
+
+.easy__item--thr {
+  grid-area: c;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.easy__item--sec {
+  grid-area: b;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.easy__item--sec img {
+  margin-bottom: -10px;
+  margin-right: -5px;
+}
+
+@media (min-width: 1720px) {
+  .easy__item--sec img {
+    margin-right: -12px;
+  }
+}
+
+.easy__item--thr img {
+  margin-bottom: -10px;
+  margin-right: 24px;
+}
+
+.easy__item--thr p {
+  max-width: 50%;
+}
+
+.easy__arrow {
+  width: 68px;
+  height: 18px;
+  background-image: url("/static/img/svg/Arrow08.svg");
+  position: absolute;
+  z-index: 1;
+}
+
+@media (min-width: 1720px) {
+  .easy__arrow {
+    scale: 1.4;
+  }
+}
+
+.easy__arrow--fir {
+  top: 46%;
+  right: 101%;
+}
+
+@media (min-width: 1720px) {
+  .easy__arrow--fir {
+    right: 104%;
+    top: 34%;
+  }
+}
+
+.easy__arrow--sec {
+  top: 117%;
+  left: 30%;
+  transform: rotate(90deg);
+}
+
+@media (min-width: 1720px) {
+  .easy__arrow--sec {
+    left: 46%;
+    top: 124%;
+  }
+}
+
+.easy__btn {
+  margin-top: -21px;
+}
+
+.easy__item--sec p,
+.easy__item--thr p,
+.easy__item--sec,
+.easy__item--thr {
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}

static/css/moover/presentation.css

@@ -6,6 +6,7 @@
   .presentation {
     margin-left: 0;
     margin-right: 0;
+    margin-bottom: 160px;
   }
 }
 
@@ -17,7 +18,7 @@
   background-image: url(/static/img/png/Box9.png), url(/static/img/png/Box10.png), url(/static/img/png/Box11.png), url(/static/img/png/Box12.png);
   background-position: top -4px left 46px, top -30px right -14px, bottom 73px left 278px, bottom 71px right 276px;
   background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
-  background-size: 17.5%,21.8%,8.5%,8.8%;
+  background-size: 17.5%, 21.8%, 8.5%, 8.8%;
 }
 
 @media (min-width: 1720px) {
@@ -53,6 +54,23 @@
   animation: jump 2s ease-in-out infinite;
 }
 
+.presentation__cards {
+  max-width: 1300px;
+  margin: 0 auto;
+}
+
+@media (min-width: 1720px) {
+  .presentation__cards {
+    max-width: initial;
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+}
+
+.presentation__bottom .presentation__title {
+  margin-bottom: 13px;
+}
+
 @keyframes jump {
   0% {
     transform: translateY(0px);
@@ -73,12 +91,3 @@
     transform: translateY(0px);
   }
 }
-
-.presentation__bottom .presentation__title {
-  margin-bottom: 13px;
-}
-
-.presentation__cards {
-  max-width: 1300px;
-  margin: 0 auto;
-}

static/css/moover/root.css

@@ -58,6 +58,13 @@ h2, .h2 {
   margin-bottom: 10px;
 }
 
+@media (min-width: 1720px) {
+  h2, .h2 {
+    font-size: 28px;
+    margin-bottom: 20px;
+  }
+}
+
 h3, .h3 {
   font-size: 20px;
   line-height: 28px;
@@ -75,6 +82,13 @@ p {
   margin-bottom: 20px;
 }
 
+@media (min-width: 1720px) {
+  p {
+    font-size: 20px;
+    line-height: 26px;
+  }
+}
+
 b {
   font-weight: 500;
 }
@@ -109,7 +123,7 @@ b {
 
 @media (min-width: 1720px) {
   .title {
-    font-size: 44px;
+    font-size: 48px;
     margin-bottom: 22px;
   }
 }
@@ -122,7 +136,7 @@ b {
 @media (min-width: 1720px) {
   .subtitle {
     font-size: 20px;
-    margin-bottom: 97px;
+    margin-bottom: 105px;
   }
 }
 
@@ -130,8 +144,31 @@ b {
   display: none;
 }
 
+.hide__xxl {
+  display: block;
+}
+
+@media (min-width: 1720px) {
+  .hide__xxl {
+    display: none;
+  }
+}
+
+.show__xxl {
+  display: none;
+}
+
+@media (min-width: 1720px) {
+  .show__xxl {
+    display: block;
+  }
+}
+
 @media (min-width: 1440px) {
   .is-container.wrapper_main {
     max-width: initial;
   }
+  .br--xxl {
+    display: none;
+  }
 }

static/css/moover/sore.css

@@ -2,22 +2,54 @@
   margin-bottom: 160px;
 }
 
+@media (min-width: 1720px) {
+  .sore {
+    margin-bottom: 178px;
+  }
+}
+
 .sore__img {
   margin: 0 auto 26px;
   position: relative;
   left: -17px;
 }
 
+@media (min-width: 1720px) {
+  .sore__img {
+    margin-bottom: 46px;
+  }
+}
+
 .sore .title {
   margin-bottom: 40px;
 }
 
+@media (min-width: 1720px) {
+  .sore .title {
+    margin-bottom: 61px;
+  }
+}
+
 .sore .subtitle {
   max-width: 62%;
   margin: 0 auto -1px;
 }
 
+@media (min-width: 1720px) {
+  .sore .subtitle {
+    line-height: 26px;
+    max-width: 60%;
+    margin-bottom: 5px;
+  }
+}
+
 .sore .h3 {
   max-width: 47%;
   margin: 0 auto 19px;
 }
+
+@media (min-width: 1720px) {
+  .sore .h3 {
+    max-width: 38%;
+  }
+}

static/css/moover/use.css

@@ -2,12 +2,25 @@
   margin-bottom: 123px;
 }
 
+@media (min-width: 1720px) {
+  .use {
+    margin-bottom: 184px;
+  }
+}
+
 .use__img {
   width: 67.5%;
   margin-left: 16px;
   margin-bottom: 31px;
 }
 
+@media (min-width: 1720px) {
+  .use__img {
+    width: 50.2%;
+    margin-left: 27px;
+  }
+}
+
 .use__btn {
   margin-bottom: 11px;
 }
@@ -24,21 +37,22 @@
   margin-bottom: 49px;
 }
 
-.use--diff .title {
+@media (min-width: 1720px) {
-  width: 60%;
+  .use .title {
-  margin-bottom: 60px;
+    max-width: 40%;
-}
+  }
-
-.use--diff .use__img {
-  width: 100%;
-  margin-left: 0;
-  margin-bottom: 17px;
 }
 
 .use--lett {
   margin-bottom: 120px;
 }
 
+@media (min-width: 1720px) {
+  .use--lett {
+    margin-bottom: 140px;
+  }
+}
+
 .use--lett .title {
   margin-bottom: 51px;
 }
@@ -49,3 +63,9 @@
   max-width: 110%;
   width: 1290px;
 }
+
+@media (min-width: 1720px) {
+  .use--lett .use__img {
+    width: initial;
+  }
+}

static/css/moover/uses.css

@@ -2,6 +2,12 @@
   margin-bottom: 122px;
 }
 
+@media (min-width: 1720px) {
+  .uses {
+    margin-bottom: 136px;
+  }
+}
+
 .uses__grid {
   text-align: left;
   display: grid;
@@ -16,10 +22,24 @@
   padding: 0 50px 0 2px;
 }
 
+@media (min-width: 1720px) {
+  .uses__item {
+    margin-bottom: 22px;
+  }
+}
+
 .uses__icon {
   margin-bottom: 11px;
 }
 
+@media (min-width: 1720px) {
+  .uses__icon {
+    width: 147px;
+    height: 147px;
+    margin-bottom: 20px;
+  }
+}
+
 .uses .title {
   max-width: 50%;
   margin: 0 auto 60px;

styles/moover.scss

@@ -4,6 +4,7 @@
 @import "./moover/easy";
 @import "./moover/chatterbox";
 @import "./moover/use";
+@import "./moover/diff";
 @import "./moover/animate";
 @import "./moover/about";
 @import "./moover/benefits";

styles/moover/about.scss

@@ -1,42 +1,70 @@
 .about {
   margin-bottom: 168px;
-}
 
-.about .title {
+   @media (min-width: 1720px) {
-  margin-bottom: 60px;
+     margin-bottom: 188px;
-}
+  }
 
-.about__grid {
+  .title {
-  display: grid;
+    margin-bottom: 60px;
-  grid-template-columns: repeat(2, 1fr);
-  
-}
 
-.about__img {
+    @media (min-width: 1720px) {
-  box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC,
+      margin-bottom: 49px;
-  inset -18.19px -1.21px 18.19px 0 #4052801A,
+    }
-  48.5px 36.38px 36.38px 0 #6B7F9933;
+  }
-  border-radius: 31px;
-  margin-left: 8px;
-  margin-top: 8px;
-}
 
-.about__right {
+  &__grid {
-  text-align: left;
+    display: grid;
-  padding-top: 43px;
+    grid-template-columns: repeat(2, 1fr);
-  padding-left: 50px;
-}
 
-.about__half {
+  }
-  max-width: 50%;
-  float: left;
-}
 
-.about__half:last-child {
+  &__img {
-  padding-left: 16px;
+    box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC,
-  max-width: 47%;
+    inset -18.19px -1.21px 18.19px 0 #4052801A,
-}
+    48.5px 36.38px 36.38px 0 #6B7F9933;
+    border-radius: 31px;
+    margin-left: -20px;
+    margin-top: 8px;
 
-.about b {
+    @media (min-width: 1720px) {
-  letter-spacing: 0.4px;
+      margin-top: 19px;
+    }
+  }
+
+  &__right {
+    text-align: left;
+    padding-top: 43px;
+    padding-left: 50px;
+
+    @media (min-width: 1720px) {
+      padding-top: 90px;
+      padding-left: 21px;
+    }
+  }
+
+  &__half {
+    max-width: 50%;
+    float: left;
+
+    &:last-child {
+      padding-left: 16px;
+      max-width: 47%;
+    }
+  }
+
+  b {
+    letter-spacing: 0.4px;
+
+    @media (min-width: 1720px) {
+      font-weight: 700;
+      letter-spacing: 0;
+    }
+  }
+
+  p {
+    @media (min-width: 1720px) {
+      margin-bottom: 39px;
+    }
+  }
 }

styles/moover/animate.scss

@@ -6,12 +6,24 @@
   color: white;
   margin-bottom: 160px;
 
+  @media (min-width: 1720px) {
+    padding-top: 100px;
+    padding-bottom: 89px;
+    margin-bottom: 180px;
+  }
+
   &.left {
     transform: translateX(-180px);
   }
 
   &.right {
     transform: translateX(180px);
+
+    .title {
+      @media (min-width: 1720px) {
+        max-width: 80%;
+      }
+    }
   }
 
   &__link {
@@ -23,10 +35,20 @@
     margin-bottom: 25px;
     max-width: 87%;
     /*width: 90%;*/
+
+    @media (min-width: 1720px) {
+      margin-bottom: 40px;
+    }
   }
 
   .subtitle {
     width: 47%;
     margin: 0 auto 23px;
+
+    @media (min-width: 1720px) {
+      line-height: 26px;
+      letter-spacing: 0.1px;
+      margin-bottom: 40px;
+    }
   }
 }

styles/moover/benefits.scss

@@ -1,6 +1,10 @@
 .benefits {
   margin-bottom: 132px;
 
+  @media (min-width: 1720px) {
+    margin-bottom: 147px;
+  }
+
   &__grid {
     text-align: left;
     display: grid;
@@ -11,19 +15,42 @@
     min-height: 122px;
     padding-right: 7px;
     margin-bottom: 22px;
+
+    @media (min-width: 1720px) {
+      min-height: 145px;
+    }
   }
 
   &__third {
     padding-left: 16px;
+
+    @media (min-width: 1720px) {
+      padding-left: 31px;
+      margin-right: 5px;
+    }
   }
 
   .title {
     margin-bottom: 76px;
+
+    @media (min-width: 1720px) {
+      margin-bottom: 93px;
+    }
   }
 
   img {
     position: relative;
     top: 14px;
     right: -11px;
+
+    @media (min-width: 1720px) {
+      top: -33px;
+    }
+  }
+
+  h2 {
+    @media (min-width: 1720px) {
+      margin-bottom: 10px;
+    }
   }
 }

styles/moover/cards.scss

@@ -17,11 +17,27 @@
 
 .cards__img {
   margin-bottom: 5px;
+
+  @media (min-width: 1720px) {
+    width: 100%;
+    margin-bottom: 15px;
+  }
 }
 
 .cards__desc {
   font-weight: 500;
   line-height: 22px;
+
+  @media (min-width: 1720px) {
+    font-size: 20px;
+    line-height: 26px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  a {
+    color: var(--color-orange);
+  }
 }
 
 .cards__arrow {
@@ -31,4 +47,9 @@
   right: -30px;
   top: -21px;
   background-image: url("/static/img/svg/Arrow23.svg");
+
+  @media (min-width: 1720px) {
+    right: -45px;
+    top: -29px;
+  }
 }

styles/moover/chatterbox.scss

@@ -1,9 +1,17 @@
 .chatterbox {
   margin-bottom: 160px;
 
+   @media (min-width: 1720px) {
+     margin-bottom: 180px;
+  }
+
   &__slider {
     max-width: 1200px;
     margin: 0 auto;
+
+    @media (min-width: 1720px) {
+      max-width: 1640px;
+    }
   }
 
   &__slide {
@@ -14,6 +22,12 @@
     margin: auto;
     position: relative;
 
+    @media (min-width: 1720px) {
+      width: 456px;
+      height: 836px;
+      background-size: 456px 836px;
+    }
+
     &.loaded {
       video {
         opacity: 1;
@@ -47,6 +61,10 @@
     border-radius: 25px;
     background-color: grey;
     overflow: hidden;
+
+    @media (min-width: 1720px) {
+      border-radius: 50px;
+    }
   }
 
   &__vbtn {
@@ -73,6 +91,11 @@
       border: 0;
       border-radius: 50%;
       transition: opacity 100ms linear;
+
+       @media (min-width: 1720px) {
+         width: 109px;
+         height: 109px;
+  }
     }
 
     &::before,
@@ -91,6 +114,11 @@
       border-width: 15px 0 15px 25px;
       display: inline-block;
       margin-left: 2px;
+
+       @media (min-width: 1720px) {
+          border-width: 23px 0 23px 35px;
+         margin-left: 4px;
+  }
     }
   }
 
@@ -100,6 +128,10 @@
     justify-content: center;
     align-items: center;
     height: 600px;
+
+    @media (min-width: 1720px) {
+      height: 827px;
+    }
   }
 
   .title {

styles/moover/diff.scss

@@ -0,0 +1,154 @@
+.diff {
+  margin-bottom: 166px;
+
+   @media (min-width: 1720px) {
+     margin-bottom: 172px;
+  }
+
+  .title {
+    width: 60%;
+    margin-bottom: 65px;
+
+    @media (min-width: 1720px) {
+      width: 49%;
+      margin-bottom: 60px;
+    }
+  }
+
+  &__grid {
+    display: flex;
+    position: relative;
+    margin-bottom: 30px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      height: 96%;
+      width: 5px;
+      border-radius: 5px;
+      background-color: #EDEDED;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 0;
+    }
+  }
+
+  &__coll {
+    width: 50%;
+
+    &.left {
+      margin-right: 29px;
+
+      .diff__coll-title {
+        padding-left: 39px;
+
+        @media (min-width: 1720px) {
+          padding-left: 24px;
+        }
+      }
+    }
+
+    &.right {
+      margin-left: 29px;
+
+      .diff__coll-title {
+        padding-right: 39px;
+
+        @media (min-width: 1720px) {
+          padding-right: 24px;
+        }
+      }
+    }
+
+  }
+
+  &__coll-title {
+    margin-bottom: 38px;
+  }
+
+  &__item {
+    position: relative;
+    text-align: left;
+    padding-left: 10px;
+    padding-top: 11px;
+    padding-bottom: 11px;
+    display: flex;
+    gap: 11px;
+    align-items: center;
+    background-color: #FFFFFF;
+    border-radius: 15px;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+    margin-bottom: 35px;
+    cursor: default;
+
+    @media (min-width: 1720px) {
+      padding-top: 22px;
+      padding-bottom: 20px;
+      padding-left: 27px;
+      gap: 20px;
+      margin-bottom: 38px;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+
+    &:hover {
+      .diff__status::before {
+        scale: 1.2;
+      }
+    }
+  }
+
+
+  &__status {
+    position: relative;
+    height: 48px;
+    width: 48px;
+    border-radius: 5px;
+    flex-shrink: 0;
+
+    @media (min-width: 1720px) {
+      border-radius: 12px;
+    }
+
+    &::before {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      transform-origin: 0% 15%;
+    }
+
+    &::before {
+      content: '';
+      width: 36px;
+      height: 36px;
+    }
+
+    .diff__item--done & {
+      background-color: #CCF9D9;
+
+      &::before {
+        width: 26px;
+        height: 26px;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
+      }
+    }
+
+    .diff__item--error & {
+      background-color: #F9CCCC;
+
+      &::before {
+        width: 36px;
+        height: 36px;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
+      }
+    }
+  }
+
+
+}

styles/moover/easy.scss

@@ -1,64 +1,148 @@
 .easy {
   margin-bottom: 162px;
-}
 
-.easy .title {
+   @media (min-width: 1720px) {
-  max-width: 55%;
+     margin-bottom: 180px;
-  margin-bottom: 21px;
+  }
-}
 
-.easy .subtitle {
+  .title {
-  margin-bottom: 41px;
+    max-width: 55%;
-}
+    margin-bottom: 21px;
 
-.easy__grid {
+    @media (min-width: 1720px) {
-  display: grid;
+      max-width: 45%;
-  grid-template-columns: 1fr 1fr;
+      margin-bottom: 23px;
-  grid-template-rows: repeat(2, minmax(186px, auto));
+    }
-  grid-template-areas:
+  }
+
+  .subtitle {
+    margin-bottom: 41px;
+
+    @media (min-width: 1720px) {
+      margin-bottom: 59px;
+    }
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: repeat(2, minmax(186px, auto));
+    grid-template-areas:
         'a  b'
         'a  c';
-  grid-column-gap: 20px;
+    grid-column-gap: 20px;
-  grid-row-gap: 80px;
+    grid-row-gap: 80px;
-  margin-bottom: 46px;
+    margin-bottom: 46px;
-}
 
-.easy__item {
+    @media (min-width: 1720px) {
-  border-radius: 30px;
+      grid-column-gap: 147px;
-  background-color: var(--color-grey);
+      grid-template-rows: repeat(2, minmax(245px, auto));
-  /*background-color: #a72525;*/
+      grid-row-gap: 136px;
-  text-align: left;
+      margin-bottom: 63px;
-  padding: 21px;
+    }
-  box-shadow: var(--box-shadow-primary);
+  }
-}
 
-.easy__item--fir {
+  &__item {
-  grid-area: a;
+    border-radius: 30px;
-  margin-right: 60px;
+    background-color: var(--color-grey);
-  padding-bottom: 0;
+    /*background-color: #a72525;*/
-}
+    text-align: left;
+    padding: 21px;
+    box-shadow: var(--box-shadow-primary);
 
-.easy__item--fir p {
+    &--fir {
-  width: 93%;
+      grid-area: a;
-  margin-bottom: 29px;
+      margin-right: 60px;
-}
+      padding-bottom: 0;
 
-.easy__item--sec img {
+      @media (min-width: 1720px) {
-  margin-bottom: -10px;
+        margin-right: -10px;
-  margin-right: -5px;
+        margin-left: 7px;
-}
+        padding-top: 31px;
+      }
 
-.easy__item--thr img {
+      p {
-  margin-bottom: -10px;
+        width: 93%;
-  margin-right: 24px;
+        margin-bottom: 29px;
-}
 
-.easy__item--sec {
+        @media (min-width: 1720px) {
-  grid-area: b;
+          width: 89%;
-  position: relative;
+          margin-bottom: 53px;
-  display: flex;
+        }
-  align-items: center;
+      }
-  justify-content: space-between;
+    }
+
+    &--thr {
+      grid-area: c;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    &--sec {
+      grid-area: b;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      img {
+        margin-bottom: -10px;
+        margin-right: -5px;
+
+        @media (min-width: 1720px) {
+          margin-right: -12px;
+        }
+      }
+    }
+
+
+    &--thr img {
+      margin-bottom: -10px;
+      margin-right: 24px;
+    }
+
+    &--thr p {
+      max-width: 50%;
+    }
+  }
+
+  &__arrow {
+    width: 68px;
+    height: 18px;
+    background-image: url("/static/img/svg/Arrow08.svg");
+    position: absolute;
+    z-index: 1;
+
+    @media (min-width: 1720px) {
+      scale: 1.4;
+    }
+
+    &--fir {
+      top: 46%;
+      right: 101%;
+
+      @media (min-width: 1720px) {
+        right: 104%;
+        top: 34%;
+      }
+    }
+
+    &--sec {
+      top: 117%;
+      left: 30%;
+      transform: rotate(90deg);
+
+      @media (min-width: 1720px) {
+        left: 46%;
+        top: 124%;
+      }
+    }
+  }
+
+  &__btn {
+    margin-top: -21px;
+  }
 }
 
 .easy__item--sec p,
@@ -69,37 +153,3 @@
   padding-top: 0;
   padding-bottom: 0;
 }
-
-.easy__item--thr {
-  grid-area: c;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.easy__item--thr p {
-  max-width: 50%;
-}
-
-.easy__arrow {
-  width: 68px;
-  height: 18px;
-  background-image: url("/static/img/svg/Arrow08.svg");
-  position: absolute;
-  z-index: 1;
-}
-
-.easy__arrow--fir {
-  top: 46%;
-  right: 101%;
-}
-
-.easy__arrow--sec {
-  top: 117%;
-  left: 30%;
-  transform: rotate(90deg);
-}
-
-.easy__btn {
-  margin-top: -21px;
-}

styles/moover/presentation.scss

@@ -4,61 +4,77 @@
   @media (min-width: 1720px) {
     margin-left: 0;
     margin-right: 0;
+    margin-bottom: 160px;
   }
-}
 
-.presentation__top {
+  &__top {
-  position: relative;
+    position: relative;
-  min-height: 270px;
+    min-height: 270px;
-  margin: 0 auto 116px;
+    margin: 0 auto 116px;
-  padding: 29px 0 40px;
+    padding: 29px 0 40px;
-  background-image: url(/static/img/png/Box9.png),
+    background-image: url(/static/img/png/Box9.png),
-  url(/static/img/png/Box10.png),
+    url(/static/img/png/Box10.png),
-  url(/static/img/png/Box11.png),
+    url(/static/img/png/Box11.png),
-  url(/static/img/png/Box12.png);
+    url(/static/img/png/Box12.png);
-  background-position: top -4px left 46px,
+    background-position: top -4px left 46px,
-  top -30px right -14px,
+    top -30px right -14px,
-  bottom 73px left 278px,
+    bottom 73px left 278px,
-  bottom 71px right 276px;
+    bottom 71px right 276px;
-  background-repeat: no-repeat,
+    background-repeat: no-repeat,
-  no-repeat,
+    no-repeat,
-  no-repeat,
+    no-repeat,
-  no-repeat;
+    no-repeat;
-  background-size: 17.5%,21.8%,8.5%,8.8%;
+    background-size: 17.5%, 21.8%, 8.5%, 8.8%;
 
-  @media (min-width: 1720px) {
+    @media (min-width: 1720px) {
-    background-size: 18.5%, 22%, 9%, 10.1%;
+      background-size: 18.5%, 22%, 9%, 10.1%;
-    background-position: top -47px left 58px,
+      background-position: top -47px left 58px,
-    top -31px right 20px,
+      top -31px right 20px,
-    bottom 8px left 347px,
+      bottom 8px left 347px,
-    bottom -5px right 352px;
+      bottom -5px right 352px;
-    padding-top: 95px;
+      padding-top: 95px;
-    margin-bottom: 176px;
+      margin-bottom: 176px;
+    }
   }
-}
 
-.presentation__title {
+  &__title {
-  margin-bottom: 23px;
+    margin-bottom: 23px;
-}
+  }
 
-.presentation__subtitle {
+  &__subtitle {
-  margin-bottom: 41px;
+    margin-bottom: 41px;
-  font-weight: 600;
+    font-weight: 600;
-}
+  }
 
-.presentation__btn {
+  &__btn {
-  margin-bottom: 40px;
+    margin-bottom: 40px;
-}
+  }
 
-.presentation__next {
+  &__next {
-  font-weight: 500;
+    font-weight: 500;
-  line-height: 22px;
+    line-height: 22px;
-  padding-right: 5px;
+    padding-right: 5px;
-}
+  }
 
-.presentation__arrows {
+  &__arrows {
-  padding-top: 2px;
+    padding-top: 2px;
-  animation: jump 2s ease-in-out infinite;
+    animation: jump 2s ease-in-out infinite;
+  }
+
+  &__cards {
+    max-width: 1300px;
+    margin: 0 auto;
+
+    @media (min-width: 1720px) {
+      max-width: initial;
+      margin-left: -10px;
+      margin-right: -10px;
+    }
+  }
+
+  &__bottom .presentation__title {
+    margin-bottom: 13px;
+  }
 }
 
 @keyframes jump {
@@ -81,12 +97,3 @@
     transform: translateY(0px);
   }
 }
-
-.presentation__bottom .presentation__title {
-  margin-bottom: 13px;
-}
-
-.presentation__cards {
-  max-width: 1300px;
-  margin: 0 auto;
-}

styles/moover/root.scss

@@ -60,6 +60,11 @@ h2, .h2 {
   font-size: 24px;
   line-height: 36px;
   margin-bottom: 10px;
+
+  @media (min-width: 1720px) {
+    font-size: 28px;
+    margin-bottom: 20px;
+  }
 }
 
 h3, .h3 {
@@ -77,6 +82,11 @@ h4, .h4 {
 p {
   line-height: 22px;
   margin-bottom: 20px;
+
+  @media (min-width: 1720px) {
+    font-size: 20px;
+    line-height: 26px;
+  }
 }
 
 b {
@@ -111,9 +121,9 @@ b {
   margin-left: auto;
   margin-right: auto;
 
-   @media (min-width: 1720px) {
+  @media (min-width: 1720px) {
-    font-size: 44px;
+    font-size: 48px;
-     margin-bottom: 22px;
+    margin-bottom: 22px;
   }
 }
 
@@ -121,18 +131,44 @@ b {
   margin-bottom: 81px;
   line-height: 22px;
 
-   @media (min-width: 1720px) {
+  @media (min-width: 1720px) {
-     font-size: 20px;
+    font-size: 20px;
-     margin-bottom: 97px;
+    margin-bottom: 105px;
   }
 }
 
 .hide {
   display: none;
+
+  &__xxl {
+    display: block;
+
+    @media (min-width: 1720px) {
+      display: none;
+    }
+  }
+}
+
+.show {
+
+  &__xxl {
+    display: none;
+
+    @media (min-width: 1720px) {
+      display: block;
+    }
+  }
 }
 
 @media (min-width: 1440px) {
   .is-container.wrapper_main {
     max-width: initial;
   }
-}
+
+  .br {
+    &--xxl {
+      display: none;
+    }
+  }
+}
+

styles/moover/sore.scss

@@ -1,15 +1,26 @@
 .sore {
   margin-bottom: 160px;
 
+  @media (min-width: 1720px) {
+    margin-bottom: 178px;
+  }
+
   &__img {
     margin: 0 auto 26px;
     position: relative;
     left: -17px;
 
+    @media (min-width: 1720px) {
+      margin-bottom: 46px;
+    }
   }
 
   .title {
     margin-bottom: 40px;
+
+    @media (min-width: 1720px) {
+      margin-bottom: 61px;
+    }
   }
 
 
@@ -17,11 +28,19 @@
     max-width: 62%;
     margin: 0 auto -1px;
 
+    @media (min-width: 1720px) {
+      line-height: 26px;
+      max-width: 60%;
+      margin-bottom: 5px;
+    }
   }
 
   .h3 {
     max-width: 47%;
-   margin: 0 auto 19px;
+    margin: 0 auto 19px;
 
+    @media (min-width: 1720px) {
+      max-width: 38%;
+    }
   }
 }

styles/moover/use.scss

@@ -1,10 +1,19 @@
 .use {
   margin-bottom: 123px;
 
+  @media (min-width: 1720px) {
+    margin-bottom: 184px;
+  }
+
   &__img {
     width: 67.5%;
     margin-left: 16px;
     margin-bottom: 31px;
+
+    @media (min-width: 1720px) {
+      width: 50.2%;
+      margin-left: 27px;
+    }
   }
 
   &__btn {
@@ -21,24 +30,20 @@
   .title {
     max-width: 80%;
     margin-bottom: 49px;
-  }
 
-  &--diff {
+    @media (min-width: 1720px) {
-    .title {
+      max-width: 40%;
-      width: 60%;
-      margin-bottom: 60px;
-    }
-
-    .use__img {
-      width: 100%;
-      margin-left: 0;
-      margin-bottom: 17px;
     }
   }
 
   &--lett {
     margin-bottom: 120px;
 
+    @media (min-width: 1720px) {
+      margin-bottom: 140px;
+    }
+
+
     .title {
       margin-bottom: 51px;
     }
@@ -48,6 +53,10 @@
       margin-right: -5px;
       max-width: 110%;
       width: 1290px;
+
+      @media (min-width: 1720px) {
+        width: initial;
+      }
     }
   }
 }

styles/moover/uses.scss

@@ -1,12 +1,18 @@
 .uses {
   margin-bottom: 122px;
 
+  @media (min-width: 1720px) {
+    margin-bottom: 136px;
+  }
+
   &__grid {
     text-align: left;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     /* max-width: 101.5%; */
     /* width: 101.5%; */
+
+
   }
 
 
@@ -14,12 +20,23 @@
     min-height: 50px;
     margin-bottom: 43px;
     padding: 0 50px 0 2px;
+
+    @media (min-width: 1720px) {
+      margin-bottom: 22px;
+    }
   }
 
   &__icon {
     margin-bottom: 11px;
+
+    @media (min-width: 1720px) {
+      width: 147px;
+      height: 147px;
+      margin-bottom: 20px;
+    }
   }
 
+
   .title {
     max-width: 50%;
     margin: 0 auto 60px;

templates/blocks/n_header.html

@@ -0,0 +1,26 @@
+{% load i18n %}
+{% load base_tags_extra %}
+{% load webpush_notifications %}
+
+</div>
+<header id="header_bg" class="header">
+  <div class="header__logo">
+    
+  </div>
+  <nav class="header__nav">
+    <ul class="header__list">
+      <li class="header__item">
+        <a href="#benefits" class="header__link">Преимущества</a>
+      </li>
+      <li class="header__item">
+        <a href="#rewiews" class="header__link">Отзывы</a>
+      </li>
+      <li class="header__item">
+        <a href="#howtowork" class="header__link">Как это работает</a>
+      </li>
+      <li class="header__item">
+        <a href="#about" class="header__link">О сервисе</a>
+      </li>
+    </ul>
+  </nav>
+</header>

templates/pages/p_mover_landing_page.html

@@ -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='br1'/> посылку, но её не устраивает<br class='br1'/> цена доставки почтовых<br class='br1'/>" %}
+              {% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl'/> цена доставки почтовых<br class='br1'/>" %}
-              {% translate "сервисов и она устала искать в<br class='br1'/> чатах тех, кто сможет перевезти<br class='br1'/> посылку." %}
+              {% translate "сервисов и она устала искать в<br class='br--xxl'/> чатах тех, кто сможет перевезти<br class='br--xxl'/> посылку." %}
             </p>
           </div>
           <div class="cards__item">
@@ -58,20 +58,20 @@
 
               {% translate "Мария, узнаёт о нашем сервисе<br class='br1'/>" %}
               <a href="/">TripWB.com. </a>
-              {% translate "Регистрируется<br class='br1'/> и очень быстро размещает<br class='br1'/> объявление." %}
+              {% translate "Регистрируется<br class='br--xxl'/> и очень быстро размещает<br class='br--xxl'/> объявление." %}
             </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='br1'/> объявление Марии, нажал<br class='br1'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br1'/> удобным для него способом." %}
+              {% translate "Попутчик Егор увидел<br class='br--xxl'/> объявление Марии, нажал<br class='br--xxl'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br--xxl'/> удобным для него способом." %}
             </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='br1'/> чего Мария передала посылку<br class='br1'/> Егору и он её доставил." %}
+              {% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br--xxl'/> чего Мария передала посылку<br class='br--xxl'/> Егору и он её доставил." %}
             </p>
           </div>
         </div>
@@ -89,17 +89,18 @@
       <div class="easy__item easy__item--fir">
         <h2>{% translate "Один простой шаг" %}</h2>
         <p>{% translate "За пару кликов <b>размещаешь объявление</b> на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}</p>
-        <img src="{% static 'img/webp/sender-card1.webp' %}" alt="sender1">
+        <img src="{% static 'img/png/sender-card1.png' %}" alt="sender1">
       </div>
       <div class="easy__item easy__item--sec">
         <div class="easy__arrow easy__arrow--fir"></div>
         <div class="easy__arrow easy__arrow--sec"></div>
         <p>{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
-        <img src="{% static 'img/webp/sender-card2.webp' %}" alt="sender1">
+        <img src="{% static 'img/png/sender-card2.png' %}" alt="sender1">
       </div>
       <div class="easy__item easy__item--thr">
-        <p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
+        <p class="hide__xxl">{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
-        <img src="{% static 'img/webp/sender-card3.webp' %}" alt="sender1">
+        <p class="show__xxl">{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
+        <img src="{% static 'img/png/sender-card3.png' %}" alt="sender1">
 
       </div>
     </div>
@@ -118,119 +119,172 @@
     <br/>
     <a href="#registr" class="use__link">{% translate "Зарегистрироваться" %}</a>
   </section>
-  <section class="use use--diff">
+  <section class="diff">
     <div class="title">{% translate "Чем мы отличаемся от классических почтовых сервисов" %}</div>
-    <img src="{% static "img/webp/diff.webp" %}" alt="list differences" class="use__img">
+    <div class="diff__grid">
+      <div class="diff__coll left">
+        <div class="diff__coll-title h2">
+          Trip With Bonus
+        </div>
+        <div class="diff__item diff__item--done">
+          <div class="diff__status"></div>
+          Стоимость перевозки назначаете сами
+        </div>
+        <div class="diff__item diff__item--done">
+          <div class="diff__status"></div>
+          Возможность контакта с перевозчиком в режиме онлайн
+        </div>
+        <div class="diff__item diff__item--done">
+          <div class="diff__status"></div>
+          Встреча с перевозчиком в удобном для вас месте
+        </div>
+        <div class="diff__item diff__item--done">
+          <div class="diff__status"></div>
+          Без дополнительных платежей и комиссий за параметры посылки
+        </div>
+        <div class="diff__item diff__item--done">
+          <div class="diff__status"></div>
+          Вы сами выбираете оптимальный маршрут и время доставки
+        </div>
+      </div>
+      <div class="diff__coll right">
+        <div class="diff__coll-title h2">
+          Другие почтовые сервисы
+        </div>
+        <div class="diff__item diff__item--error">
+          <div class="diff__status"></div>
+          Стоимость перевозки назначает сервис
+        </div>
+        <div class="diff__item diff__item--error">
+          <div class="diff__status"></div>
+          Автоматический трекинг не всегда даёт актуальную информацию
+        </div>
+        <div class="diff__item diff__item--error">
+          <div class="diff__status"></div>
+
+          Нужно ехать только в пункт отправки посылки
+        </div>
+        <div class="diff__item diff__item--error">
+          <div class="diff__status"></div>
+          Дополнительная стоимость за разные параметры посылки
+        </div>
+        <div class="diff__item diff__item--error">
+          <div class="diff__status"></div>
+          Посылка может перевозиться долго и с большим количеством перегрузок
+        </div>
+
+      </div>
+    </div>
   </section>
-  <section class="chatterbox">
+  <section class="chatterbox" >
     <div class="title">{% translate "Что о нас говорят люди" %}</div>
     <div class="chatterbox__slider slick-slider">
-      {% for media_item in page.get_media_items %}
+      {#      {% for media_item in page.get_media_items %}#}
-        <div class="slick-slide">
+      {#        <div class="slick-slide">#}
-            <div class="chatterbox__slide">
+      {#          <div class="chatterbox__slide">#}
-              <div class="chatterbox__vbtn"></div>
+      {#            <div class="chatterbox__vbtn"></div>#}
-              <div class="chatterbox__wrap">
+      {#            <div class="chatterbox__wrap">#}
-                <div class="chatterbox__vbox">
+      {#              <div class="chatterbox__vbox">#}
-                  <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
+      {#                <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">#}
-                  <video
+      {#                <video#}
-                      data-src="{{ MEDIA_URL }}{{ media_item.video }}"
+      {#                    data-src="{{ MEDIA_URL }}{{ media_item.video }}"#}
-                      poster="{{ MEDIA_URL }}{{ media_item.picture }}"
+      {#                    poster="{{ MEDIA_URL }}{{ media_item.picture }}"#}
-                      controls
+      {#                    controls#}
-                      autoplay
+      {#                    autoplay#}
-                  ></video>
+      {#                ></video>#}
-                </div>
+      {#              </div>#}
-              </div>
+      {#            </div>#}
+      {#          </div>#}
+      {##}
+      {#        </div>#}
+      {#      {% endfor %}#}
+      <div class="slick-slide">
+        <div class="chatterbox__slide">
+          <div class="chatterbox__vbtn"></div>
+          <div class="chatterbox__wrap">
+            <div class="chatterbox__vbox">
+              <img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
+              <video
+                  data-src="/media/media_items/video/1.mp4"
+                  poster="/media/media_items/image/ava1.jpg"
+                  controls
+                  autoplay
+              ></video>
             </div>
-    
+          </div>
         </div>
-      {% endfor %}
+
-{#      <div class="slick-slide">#}
+      </div>
-{#        <div class="chatterbox__slide">#}
+      <div class="slick-slide">
-{#          <div class="chatterbox__vbtn"></div>#}
+        <div class="chatterbox__slide">
-{#          <div class="chatterbox__wrap">#}
+          <div class="chatterbox__vbtn"></div>
-{#            <div class="chatterbox__vbox">#}
+          <div class="chatterbox__wrap">
-{#              <img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">#}
+            <div class="chatterbox__vbox">
-{#              <video#}
+              <img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
-{#                  data-src="/media/media_items/video/1.mp4"#}
+              <video
-{#                  poster="/media/media_items/image/ava1.jpg"#}
+                  data-src="/media/media_items/video/2.mp4"
-{#                  controls#}
+                  poster="/media/media_items/image/ava2.jpg"
-{#                  autoplay#}
+                  controls
-{#              ></video>#}
+                  autoplay
-{#            </div>#}
+              ></video>
-{#          </div>#}
+            </div>
-{#        </div>#}
+          </div>
-{##}
+        </div>
-{#      </div>#}
+      </div>
-{#      <div class="slick-slide">#}
+      <div class="slick-slide">
-{#        <div class="chatterbox__slide">#}
+        <div class="chatterbox__slide">
-{#          <div class="chatterbox__vbtn"></div>#}
+          <div class="chatterbox__vbtn"></div>
-{#          <div class="chatterbox__wrap">#}
+          <div class="chatterbox__wrap">
-{#            <div class="chatterbox__vbox">#}
+            <div class="chatterbox__vbox">
-{#              <img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">#}
+              <img src="/media/media_items/image/ava3.jpg" alt="user" class="chatterbox__poster">
-{#              <video#}
+              <video
-{#                  data-src="/media/media_items/video/2.mp4"#}
+                  data-src="/media/media_items/video/3.mp4"
-{#                  poster="/media/media_items/image/ava2.jpg"#}
+                  poster="/media/media_items/image/ava3.jpg"
-{#                  controls#}
+                  controls
-{#                  autoplay#}
+                  autoplay
-{#              ></video>#}
+              >
-{#            </div>#}
+              </video>
-{#          </div>#}
+            </div>
-{#        </div>#}
+          </div>
-{#      </div>#}
+        </div>
-{#      <div class="slick-slide">#}
+
-{#        <div class="chatterbox__slide">#}
+      </div>
-{#          <div class="chatterbox__vbtn"></div>#}
+      <div class="slick-slide">
-{#          <div class="chatterbox__wrap">#}
+        <div class="chatterbox__slide">
-{#            <div class="chatterbox__vbox">#}
+          <div class="chatterbox__vbtn"></div>
-{#              <img src="/media/media_items/image/ava3.jpg" alt="user" class="chatterbox__poster">#}
+          <div class="chatterbox__wrap">
-{#              <video#}
+            <div class="chatterbox__vbox">
-{#                  data-src="/media/media_items/video/3.mp4"#}
+              <img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
-{#                  poster="/media/media_items/image/ava3.jpg"#}
+              <video
-{#                  controls#}
+                  data-src="/media/media_items/video/4.mp4"
-{#                  autoplay#}
+                  poster="/media/media_items/image/ava1.jpg"
-{#              >#}
+                  controls
-{#              </video>#}
+                  autoplay
-{#            </div>#}
+              >
-{#          </div>#}
+              </video>
-{#        </div>#}
+            </div>
-{##}
+          </div>
-{#      </div>#}
+        </div>
-{#      <div class="slick-slide">#}
+      </div>
-{#        <div class="chatterbox__slide">#}
+      <div class="slick-slide">
-{#          <div class="chatterbox__vbtn"></div>#}
+        <div class="chatterbox__slide">
-{#          <div class="chatterbox__wrap">#}
+          <div class="chatterbox__vbtn"></div>
-{#            <div class="chatterbox__vbox">#}
+          <div class="chatterbox__wrap">
-{#              <img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">#}
+            <div class="chatterbox__vbox">
-{#              <video#}
+              <img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
-{#                  data-src="/media/media_items/video/4.mp4"#}
+              <video
-{#                  poster="/media/media_items/image/ava1.jpg"#}
+                  data-src="/media/media_items/video/5.mp4"
-{#                  controls#}
+                  poster="/media/media_items/image/ava2.jpg"
-{#                  autoplay#}
+                  controls
-{#              >#}
+                  autoplay
-{#              </video>#}
+              >
-{#            </div>#}
+              </video>
-{#          </div>#}
+            </div>
-{#        </div>#}
+          </div>
-{#      </div>#}
+
-{#      <div class="slick-slide">#}
+
-{#        <div class="chatterbox__slide">#}
+        </div>
-{#          <div class="chatterbox__vbtn"></div>#}
+      </div>
-{#          <div class="chatterbox__wrap">#}
-{#            <div class="chatterbox__vbox">#}
-{#              <img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">#}
-{#              <video#}
-{#                  data-src="/media/media_items/video/5.mp4"#}
-{#                  poster="/media/media_items/image/ava2.jpg"#}
-{#                  controls#}
-{#                  autoplay#}
-{#              >#}
-{#              </video>#}
-{#            </div>#}
-{#          </div>#}
-{##}
-{##}
-{#        </div>#}
-{#      </div>#}
     </div>
     <script type="text/javascript">
       $(document).ready(function () {
@@ -292,9 +346,12 @@
       });
     </script>
   </section>
-  <section class="use use--lett">
+  <section class="use use--lett" id="rewiews">
     <div class="title">{% translate "Что о нас пишут люди" %}</div>
-    <img src="{% static "img/png/use-letterss.png" %}" alt="list letters" class="use__img">
+    <picture>
+      <source srcset="{% static "img/png/use-letters-1920.png" %}" media="(min-width: 1720px)"/>
+      <img src="{% static "img/png/use-letterss.png" %}" alt="list letters" class="use__img">
+    </picture>
   </section>
   <section class="animate left">
     <div class="title">
@@ -331,10 +388,14 @@
       });
     </script>
   </section>
-  <section class="about">
+  <section class="about" id="about">
     <div class="title">{% translate "О сервисе Trip With Bonus" %}</div>
     <div class="about__grid">
-      <img src="{% static "/img/png/about.png" %}" alt="" class="about__img">
+      <picture class="about__img">
+        <source srcset="{% static "img/png/about-1920.png" %}" media="(min-width: 1720px)"/>
+        <img src="{% static "/img/png/about.png" %}" alt="about">
+      </picture>
+      {#      <img src="{% static "/img/png/about.png" %}" alt="about" class="about__img">#}
       <div class="about__right">
         <p>{% translate "TripWB&nbsp;- это сервис попутных посылок, который <b>соединяет отправителя посылки</b> того, кому нужно что-то передать в&nbsp;другой город или страну, и&nbsp;<b>перевозчика посылки</b>, а&nbsp;именно попутчика или путешественника, который следует по&nbsp;пути назначения." %}</p>
         <p>{% translate "<b>Тебе не&nbsp;нужно больше бежать в&nbsp;чаты и&nbsp;группы</b> в&nbsp;социальных сетях и&nbsp;искать тех, кто сможет перевезти посылку, а&nbsp;достаточно просто зайти на&nbsp;сайт, разместить объявление в&nbsp;пару кликов и&nbsp;дождаться откликов от&nbsp;попутчиков." %}
@@ -344,7 +405,7 @@
     </div>
     {#    </div>#}
   </section>
-  <section class="benefits">
+  <section class="benefits" id="benefits">
     <div class="title">{% translate "Преимущества сервиса" %}</div>
     <div class="benefits__grid">
       <div class="benefits__first">
@@ -362,7 +423,10 @@
         </div>
       </div>
       <div class="benefits__second">
-        <img src="{% static "/img/png/benefits.png" %}" alt="benefits">
+        <picture>
+          <source srcset="{% static "img/png/benefits-1920.png" %}" media="(min-width: 1720px)"/>
+          <img src="{% static "/img/png/benefits.png" %}" alt="benefits">
+        </picture>
       </div>
       <div class="benefits__third">
         <div class="benefits__item">
@@ -386,39 +450,39 @@
     <div class="uses__grid">
       <div class="uses__item">
         <img class="uses__icon" src="{% static "img/svg/files.svg" %}" alt="image icon">
-        <div class="uses__desc">
+        <p class="uses__desc">
           {% translate "Когда нужно отправить документы партнеру или родственнику" %}
-        </div>
+        </p>
       </div>
       <div class="uses__item">
         <img class="uses__icon" src="{% static "img/svg/box.svg" %}" alt="image icon">
-        <div class="uses__desc">
+        <p class="uses__desc">
           {% translate "Когда необходимо отправить посылку в&nbsp;другую страну" %}
-        </div>
+        </p>
       </div>
       <div class="uses__item">
         <img class="uses__icon" src="{% static "img/svg/present.svg" %}" alt="image icon">
-        <div class="uses__desc">
+        <p class="uses__desc">
           {% translate "Когда нужно отправить подарок семье, друзьям или знакомым" %}
-        </div>
+        </p>
       </div>
       <div class="uses__item">
         <img class="uses__icon" src="{% static "img/svg/bax.svg" %}" alt="image icon">
-        <div class="uses__desc">
+        <p class="uses__desc">
           {% translate "Когда стоимость пересылки через почтовый сервис высокая или перевозка занимает длительное время" %}
-        </div>
+        </p>
       </div>
       <div class="uses__item">
         <img class="uses__icon" src="{% static "img/svg/books.svg" %}" alt="image icon">
-        <div class="uses__desc">
+        <p class="uses__desc">
           {% translate "Когда нужно отправить не&nbsp;только маленькую посылку, но&nbsp;и&nbsp;крупногабаритный груз" %}
-        </div>
+        </p>
       </div>
       <div class="uses__item">
         <img class="uses__icon" src="{% static "img/svg/earth.svg" %}" alt="image icon">
-        <div class="uses__desc">
+        <p class="uses__desc">
           {% translate "Когда нет прямого сообщения из&nbsp;пункта&nbsp;А в&nbsp;пункт&nbsp;Б обычными сервисами доставки" %}
-        </div>
+        </p>
       </div>
     </div>
   </section>
@@ -438,7 +502,10 @@
     <div class="subtitle">
       {% translate "Мы&nbsp;знаем, каково это без конца и&nbsp;края закидывать сообщения в&nbsp;чаты и&nbsp;группы в&nbsp;социальных сетях, в&nbsp;надежде найти человека, который едет или летит в&nbsp;нужном направлении, чтобы передать посылоку своим родным или близким. Очень часто ещё и&nbsp;стоимость пересылки в&nbsp;обычных почтовых сервисах выше стоимости самой посылки." %}
     </div>
-    <img src="{% static "img/png/sore2.png" %}" alt="sore image" class="sore__img">
+    <picture>
+      <source srcset="{% static "img/png/sore-1920.png" %}" media="(min-width: 1720px)"/>
+      <img src="{% static "/img/png/sore.png" %}" alt="sore image" class="sore__img">
+    </picture>
     <div class="h3">
       {% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %}
     </div>