рефакторинг кода

css/styles.css

@@ -45,10 +45,14 @@ body {
 header {
   background-image: url("../img/banner.jpg");
   background-repeat: no-repeat;
-  background-size: 100% 100%;
   background-position: center;
   margin-bottom: 97px;
 }
+@media (min-width: 576px) {
+  header {
+    background-size: 100% 100%;
+  }
+}
 @media (max-width: 992px) {
   header {
     margin-bottom: 57px;
@@ -56,6 +60,9 @@ header {
 }
 @media (max-width: 576px) {
   header {
+    background-image: url("../img/banner.jpg");
+    background-repeat: no-repeat;
+    background-position: center;
     height: 560px;
     margin-bottom: 58px;
   }
@@ -63,13 +70,24 @@ header {
 .background-banner {
   background-image: url("../img/banner-background.png");
   background-repeat: no-repeat;
-  background-size: 100% 100%;
   background-position: center;
   margin-top: -733px;
   opacity: 0.65;
   margin-right: 0;
   margin-left: 0;
 }
+@media (min-width: 576px) {
+  .background-banner {
+    background-size: 100% 100%;
+  }
+}
+@media (max-width: 576px) {
+  .background-banner {
+    background-image: url("../img/banner-background.png");
+    margin-top: -200px;
+    height: 560px;
+  }
+}
 .ooo {
   width: 100%;
   height: 733px;
@@ -614,17 +632,16 @@ video {
     margin-top: 20px;
   }
 }
+/*
 .h2-desktop-mail {
   font-family: SF-UI-Display-Black, Arial;
-}
-@media (max-width: 576px) {
-  .h2-desktop-mail {
+  @media (max-width: 576px) {
     width: 200px;
     font-weight: 700;
     font-size: 24px;
   }
 }
-/*
+
 .h2-mobile {
   font-size: 24px;
   font-weight: 400;
@@ -675,7 +692,8 @@ video {
   @media (max-width: 768px){
     font-size: 32px;
   }
-}*/
+}
+*/
 .h3-desktop {
   font-family: SF-UI-Text-Heavy, Arial;
   margin-bottom: 18px;
@@ -914,9 +932,9 @@ button.main-btn {
 }
 /*advertising*/
 .advertising-background {
-  /*background-repeat: no-repeat;
+  background-repeat: no-repeat;
   background-size: 100% 100%;
-  background-position: center center;*/
+  background-position: center center;
   background: #f9fbff;
   padding-top: 184px;
   padding-bottom: 60px;
@@ -2053,6 +2071,7 @@ button.main-btn {
   }
 }
 .technology-card p {
+  font-family: SFUIDisplay-Light, Arial;
   font-size: 16px;
   font-weight: 300;
   line-height: 24px;

css/styles.less

@@ -43,13 +43,18 @@ body {
 header {
   background-image: url("../img/banner.jpg");
   background-repeat: no-repeat;
-  background-size: 100% 100%;
   background-position: center;
   margin-bottom: 97px;
+  @media(min-width: 576px){
+    background-size: 100% 100%;
+  }
   @media (max-width: 992px) {
     margin-bottom: 57px;
   }
   @media (max-width: 576px) {
+    background-image: url("../img/banner.jpg");
+    background-repeat: no-repeat;
+    background-position: center;
     height: 560px;
     margin-bottom: 58px;
   }
@@ -57,12 +62,19 @@ header {
 .background-banner {
   background-image: url("../img/banner-background.png");
   background-repeat: no-repeat;
-  background-size: 100% 100%;
   background-position: center;
   margin-top: -733px;
   opacity: 0.65;
   margin-right: 0;
   margin-left: 0;
+  @media(min-width: 576px) {
+    background-size: 100% 100%;
+  }
+  @media(max-width: 576px){
+     background-image: url("../img/banner-background.png");
+    margin-top: -200px;
+    height: 560px;
+  }
 }
 .ooo {
   width: 100%;
@@ -506,7 +518,7 @@ video {
     max-width: 250px;
     margin-top: 20px;
   }
-}
+}/*
 .h2-desktop-mail {
   font-family: SF-UI-Display-Black, Arial;
   @media (max-width: 576px) {
@@ -515,7 +527,7 @@ video {
     font-size: 24px;
   }
 }
-/*
+
 .h2-mobile {
   font-size: 24px;
   font-weight: 400;
@@ -533,7 +545,7 @@ video {
   margin-bottom: 29px;
   margin-top: 4px;
 }
-/*
+ /*
 .text-h2-desktop {
   font-family: SF-UI-Text-Heavy, Arial;
   font-size: 18px;
@@ -566,7 +578,8 @@ video {
   @media (max-width: 768px){
     font-size: 32px;
   }
-}*/
+}
+*/
 .h3-desktop {
   font-family: SF-UI-Text-Heavy, Arial;
   margin-bottom: 18px;
@@ -754,9 +767,9 @@ button.main-btn {
 }
 /*advertising*/
 .advertising-background {
-  /*background-repeat: no-repeat;
+  background-repeat: no-repeat;
   background-size: 100% 100%;
-  background-position: center center;*/
+  background-position: center center;
   background: #f9fbff;
   padding-top: 184px;
   padding-bottom: 60px;
@@ -1308,7 +1321,6 @@ button.main-btn {
   }
 }
 .protection-img {
-
   width: 100%;
   @media (min-width: 1150px) {
     height: 98px;
@@ -1666,6 +1678,7 @@ button.main-btn {
     text-align: center!important;
   }
   p {
+    font-family: SFUIDisplay-Light, Arial;
     font-size: 16px;
     font-weight: 300;
     line-height: 24px;

index.html

@@ -585,7 +585,7 @@
             <img src="img/catalog7.png">
         </div>
         <div class="catalog-img-container catalog-img-container-end">
-            <h5>Автоматизация:</h5>
+            <h5>Аналитика:</h5>
             <img class="img-size-middle" src="img/catalog10.png">
             <img class="img-size-middle" src="img/catalog4.png">
             <img class="img-size-middle" src="img/catalog12.png">