adaptive autstaffing

src/components/Common/AuthHeader/authHeader.scss

@@ -5,6 +5,10 @@
   font-family: "GT Eesti Pro Display";
   background: #eeeeee;
 
+  @media (max-width: 431px) {
+    padding: 0;
+  }
+
   &__navigation {
     display: flex;
     align-items: center;
@@ -12,27 +16,66 @@
     width: 100%;
     justify-content: space-around;
 
+    @media (max-width: 431px) {
+      flex-direction: column;
+      height: auto;
+    }
+
     .auth {
       &__logo {
-        color: #4a4a4a;
-        font-weight: 900;
-        font-size: 16px;
-        letter-spacing: 2px;
-        position: relative;
+        @media (max-width: 431px) {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 27px 27px 40px 27px;
+        }
 
-        &::after {
-          content: "";
-          position: absolute;
-          background: #a7ca60;
-          width: 7px;
-          height: 7px;
-          border-radius: 100px;
-          left: 49%;
-          top: -30%;
+        div {
+          display: none;
+
+          @media (max-width: 431px) {
+            display: block;
+          }
+        }
+
+        h3 {
+          color: #4a4a4a;
+          font-weight: 900;
+          font-size: 16px;
+          letter-spacing: 2px;
+          position: relative;
+
+          @media (max-width: 431px) {
+            font-size: 32px;
+            line-height: 37.12px;
+            letter-spacing: 0.11em;
+          }
+
+          &::after {
+            content: "";
+            position: absolute;
+            background: #a7ca60;
+            width: 7px;
+            height: 7px;
+            border-radius: 100px;
+            left: 49%;
+            top: -30%;
+
+            @media (max-width: 431px) {
+              width: 14.67px;
+              height: 14.67px;
+              left: 48%;
+            }
+          }
         }
       }
 
       &-nav {
+        @media (max-width: 431px) {
+          display: none;
+        }
+
         ul {
           display: flex;
           column-gap: 50px;
@@ -92,20 +135,24 @@
           }
           border: 1px solid #a7ca60;
           background: none;
+
+          @media (max-width: 431px) {
+            display: none;
+          }
         }
       }
     }
   }
 }
 
-@media (max-width: 768px) {
-  .auth-header {
-    display: none;
-  }
-}
+// @media (max-width: 768px) {
+//   .auth-header {
+//     display: none;
+//   }
+// }
 
-@media (max-width: 1375px) {
-  .auth-header {
-    display: none;
-  }
-}
+// @media (max-width: 1375px) {
+//   .auth-header {
+//     display: none;
+//   }
+// }