add style catalog for 320px

css/styles.css

@@ -369,7 +369,7 @@ h1 {
 }
 @media (max-width: 576px) {
   h1 {
-    font-size: 36px;
+    font-size: 30px;
     line-height: 36px;
   }
 }
@@ -468,6 +468,11 @@ h1 {
   display: flex;
   justify-content: space-between;
 }
+@media (max-width: 576px) {
+  .header-btn-container {
+    display: inline-block;
+  }
+}
 .header-btn {
   font-family: SFUIDisplay-Regular;
   width: 290px;
@@ -510,7 +515,7 @@ h1 {
 @media (max-width: 576px) {
   .header-btn {
     margin-bottom: 20px;
-    width: 180px;
+    width: 230px;
     height: 48px;
     font-size: 16px;
     line-height: 30px;
@@ -558,7 +563,7 @@ h1 {
 }
 @media (max-width: 576px) {
   .header-btn-background {
-    width: 180px;
+    width: 230px;
     height: 48px;
     font-size: 12px;
     line-height: 30px;
@@ -1740,7 +1745,7 @@ video {
 }
 @media (max-width: 576px) {
   .tittle-catalog {
-    margin-bottom: 47px;
+    margin-bottom: 28px;
   }
 }
 .catalog-img-container {
@@ -1834,7 +1839,7 @@ video {
 .catalog-text {
   max-width: 60%;
   margin-bottom: 120px;
-  margin-top: 15px;
+  margin-top: 19px;
 }
 @media (max-width: 768px) {
   .catalog-text {

css/styles.less

@@ -308,7 +308,7 @@ h1 {
     margin-bottom: 5px;
   }
   @media (max-width: 576px) {
-    font-size: 36px;
+    font-size: 30px;
     line-height: 36px;
   }
 }
@@ -388,6 +388,9 @@ h1 {
 .header-btn-container {
   display: flex;
   justify-content: space-between;
+  @media (max-width: 576px) {
+    display: inline-block;
+  }
 }
 .header-btn {
   font-family: SFUIDisplay-Regular;
@@ -423,7 +426,7 @@ h1 {
   }
   @media (max-width:  576px) {
     margin-bottom: 20px;
-    width: 180px;
+    width: 230px;
     height: 48px;
     font-size: 16px;
     line-height: 30px;
@@ -463,7 +466,7 @@ h1 {
     font-size: 10px;
   }
   @media (max-width:  576px) {
-    width: 180px;
+    width: 230px;
     height: 48px;
     font-size: 12px;
     line-height: 30px;
@@ -1411,7 +1414,7 @@ padding-left: 40px;
     margin-bottom: 50px;
   }
   @media (max-width: 576px) {
-    margin-bottom: 47px;
+    margin-bottom: 28px;
   }
 }
 .catalog-img-container {
@@ -1483,7 +1486,7 @@ padding-left: 40px;
 .catalog-text {
   max-width: 60%;
   margin-bottom: 120px;
-  margin-top: 15px;
+  margin-top: 19px;
   @media (max-width: 768px) {
     max-width: 100%;
     margin-bottom: 80px;

index.html

@@ -1215,7 +1215,7 @@
 <script>
     $(document).ready(function () {
         $.pixlayout({
-            src: "layouts/desktop-cropped.png",
+            src: "layouts/mobile.jpg",
             opacity: 0.8,
             top: 0,
             center: true,