Powerful adaptive for the header

frontend/src/lib/components/header.svelte

@@ -52,6 +52,10 @@
 
     }
 
+    :global(.header__menu-button) {
+        display: none;
+    }
+
     .header__link {
         font-size: 28px;
         text-decoration: none; 
@@ -69,4 +73,42 @@
         gap: inherit;
     }
 
+    @media only screen and (max-width: 1036px) {
+        .header {
+            grid-template-columns: auto auto auto;
+        }
+    }
+
+    @media only screen and (max-width: 935px) {
+
+        .header {
+            grid-template-columns: auto auto 1fr;
+        }
+    }
+
+    @media only screen and (max-width: 730px) {
+
+        .header {
+            grid-template-columns: auto auto auto;
+        }
+        
+        :global(.header__menu-button) {
+            display: block;
+        }
+
+        .container > .header__link {
+            display: none;
+        }
+
+        .container > :global(.header__language-button), :global(.container > .header__darkmode-button) {
+            display: none;
+        }
+    }
+
+    @media only screen and (max-width: 622px) {
+        .header {
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+
 </style>