начал адаптировать стили

src/components/Header/Header.module.css

@@ -121,7 +121,7 @@
 @media (max-width: 768px) {
   .headerMenu {
     flex-direction: column;
-    padding: 0;
+    
   }
   
   .headerMenu a {
@@ -143,4 +143,74 @@
 
 .headerMenu a[onclick]:hover::before {
   background: linear-gradient(90deg, #ffd89b, #ff6b6b);
+}
+
+/*бургер*/
+.burger {
+  display: none;
+  flex-direction: column;
+  cursor: pointer;
+  gap: 5px;
+}
+
+.burger span {
+  width: 25px;
+  height: 3px;
+  background: black;
+  transition: 0.3s;
+}
+
+/* Анимация крестика */
+.burger.active span:nth-child(1) {
+  transform: rotate(45deg) translate(5px, 5px);
+}
+
+.burger.active span:nth-child(2) {
+  opacity: 0;
+}
+
+.burger.active span:nth-child(3) {
+  transform: rotate(-45deg) translate(6px, -6px);
+}
+
+@media (max-width: 1090px) {
+
+  .burger {
+    display: flex;
+  }
+
+  .headerMenu {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .headerNav {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background: white;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    max-height: 0;
+    overflow: hidden;
+    transition: 0.3s ease;
+  }
+
+  .headerNav.open {
+    max-height: 300px;
+  }
+
+  .headerNav a {
+    width: 100%;
+    text-align: center;
+    padding: 1rem;
+  }
+
+  .phoneBlock {
+    display: none;
+  }
 }

src/components/Header/Header.tsx

@@ -1,23 +1,39 @@
 import { NavLink } from "react-router-dom";
 import styles from './Header.module.css'
 import logo from '../../assets/images/Logo.jpg'
+import { useState } from "react";
 
 const Header = () =>{
+const [menuOpen, setMenuOpen] = useState(false);
 
-    return(
+    return (
         <nav className={styles.header}>
             <div className={styles.headerMenu}>
+                
                 <div className={styles.headeLogo}>
                     <img src={logo} alt="logo" className={styles.logoImage}/>
                     <div className={styles.phoneBlock}>
-                        <a href="" className={styles.phoneBlock}>+7 910 121 09 62</a>
+                        <a href="">+7 910 121 09 62</a>
                     </div>
                 </div>
-                <div className={styles.headerNav}>
+
-                <NavLink to="/" end >ГЛАВНАЯ</NavLink>
+                {/* БУРГЕР */}
-                <NavLink to="about" >O КОМПАНИИ</NavLink>
+                <div 
-                <NavLink to="products" >ПРОДУКЦИЯ</NavLink>
+                    className={`${styles.burger} ${menuOpen ? styles.active : ""}`}
+                    onClick={() => setMenuOpen(!menuOpen)}
+                >
+                    <span></span>
+                    <span></span>
+                    <span></span>
                 </div>
+
+                {/* НАВИГАЦИЯ */}
+                <div className={`${styles.headerNav} ${menuOpen ? styles.open : ""}`}>
+                    <NavLink to="/" end onClick={() => setMenuOpen(false)}>ГЛАВНАЯ</NavLink>
+                    <NavLink to="about" onClick={() => setMenuOpen(false)}>О КОМПАНИИ</NavLink>
+                    <NavLink to="products" onClick={() => setMenuOpen(false)}>ПРОДУКЦИЯ</NavLink>
+                </div>
+
             </div>
         </nav>
     )

src/features/catalog/Catalog.module.css

@@ -89,9 +89,24 @@ button:disabled{ opacity:.5; cursor:default;}
 .categoryCard:hover { box-shadow:0 6px 18px rgba(0,0,0,0.06); }
 .categoryImg { max-width:160px; height:auto; display:block; margin:0 auto 14px; }
 .categoryName { font-weight:700; }
-@media(max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
+@media(max-width:1090px){ .grid{grid-template-columns:repeat(2,1fr)} }
+
 @media(max-width:600px){ .grid{grid-template-columns:1fr} }
 
+@media (max-width: 1300px){
+  .grid {
+  gap: 0;
+}
+}
+
+@media (max-width: 1254px){
+  
+}
+
+@media (max-width: 1045px) {
+  
+}
+
 @media (max-width: 900px) {
   .catalogWrapper {
     flex-direction: column;

src/index.css

@@ -37,6 +37,7 @@ body {
   place-items: center;*/
   min-width: 320px;
   min-height: 100vh;
+  font-family: "Inter", "Roboto", "Arial", sans-serif;
 }
 
 /*h1 {

src/pages/Products/Products.module.css

@@ -178,12 +178,37 @@
 }
 
 /* ===== АДАПТИВ ===== */
+
+
+@media (max-width: 1254px){
+  .sidebar {
+    width: 220px;
+  }
+  .main {
+  padding: 0;
+  padding-top: 100px;
+}
+}
+
 @media (max-width: 1200px) {
   .grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
+@media (max-width: 1045px){
+  .sidebar {
+    width: 200px;
+  }
+  
+}
+
+@media (max-width: 827px){
+  .container{
+  background: white;
+}
+}
+
 @media (max-width: 768px) {
   .wrapper {
     flex-direction: column;