add style for 320px

css/styles.css

@@ -962,8 +962,13 @@ video {
 }
 @media (max-width: 576px) {
   .advertising-background {
-    padding-bottom: 10px;
     padding-top: 60px;
+    padding-bottom: 0;
+    margin-bottom: 66px;
+    background-image: url("../img/background-optuon-modal.jpg");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
   }
 }
 .advertising {
@@ -1076,7 +1081,7 @@ video {
 @media (max-width: 576px) {
   .advertising-text p {
     font-size: 14px;
-    letter-spacing: 0.14px;
+    letter-spacing: 0.16px;
     line-height: 21px;
     margin-bottom: 20px;
   }
@@ -1139,7 +1144,7 @@ video {
     font-size: 22px;
     width: 300px!important;
     font-weight: 700;
-    letter-spacing: 0;
+    letter-spacing: 0.5px;
     color: #303a81;
     line-height: 30px;
     margin-bottom: 15px;
@@ -1227,9 +1232,9 @@ video {
     order: 5;
   }
   .advertising-img-order img {
-    min-width: 320px;
+    min-width: 300px;
     min-height: 183px;
-    margin-bottom: 4px;
+    margin-bottom: 10px;
   }
 }
 @media (max-width: 1250px) {
@@ -1254,9 +1259,9 @@ video {
     margin-top: 0;
   }
   .advertising-img img {
-    min-width: 320px;
+    min-width: 300px;
     min-height: 183px;
-    margin-bottom: 21px;
+    margin-bottom: 43px;
   }
 }
 /*option*/
@@ -1269,6 +1274,7 @@ video {
 }
 @media (max-width: 576px) {
   .option-container {
+    margin-top: 3px;
     display: flex;
     justify-content: space-between;
     flex-wrap: nowrap;
@@ -1335,6 +1341,7 @@ video {
     font-size: 20px;
     line-height: 24px;
     letter-spacing: 0.2px;
+    margin-top: 37px;
   }
 }
 .option-card-img p {
@@ -1397,7 +1404,8 @@ video {
 }
 @media (max-width: 576px) {
   .option-text p {
-    font-size: 13px;
+    font-size: 14px;
+    line-height: 18px;
   }
 }
 .option-card-img-container {
@@ -1423,14 +1431,21 @@ video {
   .option-card-img-container img {
     width: 170px;
     height: 170px;
+    margin-bottom: 20px;
   }
 }
 @media (max-width: 576px) {
   .option-card-img-container img {
-    width: 107px;
-    height: 100px;
+    width: 130px;
+    height: 130px;
   }
 }
+.option-line {
+  width: 200px;
+  height: 2px;
+  background: #c94d4e;
+  margin-bottom: 20px;
+}
 .option-card-line {
   position: absolute;
   left: 51%;
@@ -1703,7 +1718,7 @@ video {
 }
 @media (max-width: 576px) {
   .catalog {
-    padding-top: 57px;
+    padding-top: 60px;
   }
 }
 .catalog-container {

css/styles.less

@@ -784,8 +784,13 @@ video {
     padding-top: 90px;
   }
   @media (max-width: 576px) {
-    padding-bottom: 10px;
     padding-top: 60px;
+    padding-bottom: 0;
+    margin-bottom: 66px;
+    background-image: url("../img/background-optuon-modal.jpg");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
   }
 }
 .advertising {
@@ -873,7 +878,7 @@ video {
     }
     @media (max-width: 576px) {
       font-size: 14px;
-      letter-spacing: 0.14px;
+      letter-spacing: 0.16px;
       line-height: 21px;
       margin-bottom: 20px;
     }
@@ -928,7 +933,7 @@ video {
       font-size: 22px;
       width: 300px!important;
       font-weight: 700;
-      letter-spacing: 0;
+      letter-spacing: 0.5px;
       color: #303a81;
       line-height: 30px;
       margin-bottom: 15px;
@@ -1002,9 +1007,9 @@ video {
     min-width: 300px;
     order: 5;
     img {
-      min-width: 320px;
+      min-width: 300px;
       min-height: 183px;
-      margin-bottom: 4px;
+      margin-bottom: 10px;
     }
   }
 }
@@ -1025,9 +1030,9 @@ video {
     min-width: 300px;
     margin-top: 0;
     img {
-      min-width: 320px;
+      min-width: 300px;
       min-height: 183px;
-      margin-bottom: 21px;
+      margin-bottom: 43px;
     }
   }
 }
@@ -1039,6 +1044,7 @@ video {
   justify-content: space-between;
   align-items: baseline;
   @media (max-width: 576px) {
+    margin-top: 3px;
     display: flex;
     justify-content: space-between;
     flex-wrap: nowrap;
@@ -1085,6 +1091,7 @@ video {
       font-size: 20px;
       line-height: 24px;
       letter-spacing: 0.2px;
+      margin-top: 37px;
     }
   }
   p {
@@ -1134,7 +1141,8 @@ padding-left: 40px;
     letter-spacing: 0.16px;
     color: #303a81;
     @media (max-width: 576px) {
-      font-size: 13px;
+      font-size: 14px;
+      line-height: 18px;
     }
   }
 }
@@ -1156,13 +1164,20 @@ padding-left: 40px;
     @media (max-width: 768px) {
       width: 170px;
       height: 170px;
+      margin-bottom: 20px;
     }
     @media (max-width: 576px) {
-      width: 107px;
-      height: 100px;
+      width: 130px;
+      height: 130px;
     }
   }
 }
+.option-line {
+  width: 200px;
+  height: 2px;
+  background: #c94d4e;
+  margin-bottom: 20px;
+}
 .option-card-line {
   position: absolute;
   left: 51%;
@@ -1382,7 +1397,7 @@ padding-left: 40px;
     padding-top: 65px
   }
   @media (max-width: 576px) {
-    padding-top: 57px
+    padding-top: 60px
   }
 }
 .catalog-container {

index.html

@@ -445,7 +445,7 @@
 
 <section class="option main-container">
     <h2>Варианты развертывания</h2>
-    <div class="main-line">
+    <div class="option-line">
     </div>
     <div class="option-container">
         <div class="option-card-img">