layout pages outstaffing and main page, refactor

footer and adaptive footer, add font BebasNeue

src/pages/Landing/landing.scss

@@ -22,6 +22,7 @@
 
     @media (max-width: 431px) {
       padding: 0 24px;
+      z-index: auto;
     }
 
     .head {
@@ -126,6 +127,7 @@
 
       @media (max-width: 431px) {
         margin: 0;
+        z-index: 9;
       }
 
       &__logo {
@@ -180,7 +182,7 @@
     visibility: hidden;
     transition: 0.2s ease-in-out;
     opacity: 0;
-    z-index: 99;
+    z-index: 8;
     position: absolute;
     top: 0;
     left: 0;
@@ -196,6 +198,10 @@
 
       img {
         width: 160px;
+
+        @media (max-width: 431px) {
+          width: 120px;
+        }
       }
     }
 
@@ -203,8 +209,11 @@
       margin-top: 28px;
       padding: 0;
       list-style: none;
-      font-size: 20px;
-      line-height: 33px;
+      font-size: 14px;
+      line-height: 20px;
+      display: flex;
+      flex-direction: column;
+      row-gap: 15px;
 
       a,
       a:hover,
@@ -218,6 +227,10 @@
       font-size: 14px;
       line-height: 22px;
       color: #000000;
+
+      @media (max-width: 431px) {
+        font-size: 11px;
+      }
     }
 
     &__contacts {
@@ -238,8 +251,9 @@
     transition: 0.1s ease-in-out;
     opacity: 1;
     display: flex;
-    width: 24%;
+    width: calc(100vw / 2.5);
     left: 0;
+    overflow: hidden;
   }
 
   &__info {
@@ -486,7 +500,19 @@
         bottom: auto;
       }
     }
+    @media (max-width: 431px) {
+      &:hover {
+        p {
+          font-weight: 700;
+          color: rgba(74, 74, 74, 1);
+          max-width: 165px;
 
+          span {
+            color: rgba(167, 202, 96, 1);
+          }
+        }
+      }
+    }
     @media (min-width: 432px) {
       &:hover {
         padding: 16px 12px 14px 2px;