feat: added header adaptive

assets/scss/_l-header.scss

@@ -1,11 +1,19 @@
 .header {
   padding: 26px 0 29px;
 
+  @include laptop {
+    padding: 17px 0 20px;
+  }
+
   & .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
+
+    @include laptop {
+      gap: 16px;
+    }
   }
 
   &__nav {
@@ -14,9 +22,24 @@
     gap: 36px;
     padding: 0 30px 0 35px;
 
+    @include desktop {
+      flex: 1 1 auto;
+      justify-content: space-around;
+      gap: 16px;
+      padding: 0;
+    }
+
+    @include laptop {
+      display: none;
+    }
+
     &-link {
       font-weight: 400;
       font-size: 15px;
+
+      @include desktop {
+        font-size: 14px;
+      }
     }
   }
 
@@ -24,5 +47,50 @@
     display: flex;
     align-items: center;
     gap: 17px;
+
+    @include laptop {
+      gap: 13px;
+    }
+
+    & .social-link--phone {
+      margin-left: 17px;
+
+      @include desktop {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    align-items: center;
+    gap: 13px;
+
+    & .button--order {
+      @include mobile {
+        display: none;
+      }
+    }
+  }
+
+  &__burger {
+    display: none;
+    height: 30px;
+    width: 30px;
+    border: none;
+    border-radius: 30px;
+    background: url(../img/icons/burger.svg) center no-repeat;
+    background-color: $blue;
+    transition: all ease-in-out 0.1s;
+    cursor: pointer;
+
+    @include laptop {
+      display: inline-block;
+      background-color: $blue;
+    }
+
+    &:active {
+      background-color: $darkblue;
+    }
   }
 }