add mobile adaptive

Components/ErrorViewer/error.module.css

@@ -85,4 +85,12 @@
     display: flex;
     gap:5px;
     align-items: center;
+}
+
+@media screen and (max-width: 1000px) {
+    .card{
+        flex-wrap: wrap;
+    }
+
+
 }

Components/header/header.module.css

@@ -47,4 +47,27 @@
     color: #FFFFFF;
     background: #13377D;
     transition: 0.3s;
-}
+}
+.burger{
+    display: none;
+}
+@media screen and (max-width: 1500px) {
+    .logo{
+        display: none;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .header{
+        flex-direction: column;
+    }
+    .itemWrapper{
+        flex-wrap: wrap;
+    }
+    .burger{
+        display: block;
+        height: 60px;
+    }
+
+}
+  

Components/header/index.tsx

@@ -1,17 +1,18 @@
 import { useRouter } from "next/router";
-import React from "react";
+import React, { useState } from "react";
 import styles from "./header.module.css"
 import 'antd/dist/antd.css';
 
 export const Header:React.FC = () =>{
     let router = useRouter()
-
+    const [open, setOpen] = useState(true)
     return(
         <div className={styles.header}>
             <div className={styles.logo} onClick={()=>router.push("/")}>
                 <img src="/images/logo.svg"></img>
             </div>
-            <div className={styles.itemWrapper}>
+            <img src="/images/logo.svg" className={styles.burger} onClick={()=>setOpen(!open)}></img>
+            <div className={styles.itemWrapper} style={{display: open? "":"none"}}>
                 <div className={styles.item} onClick={()=>router.push("/")}>
                     Проверить документы 
                 </div>

styles/Home.module.css

@@ -220,4 +220,39 @@
 
     /* main/black */
     color: #000000;
+}
+
+@media screen and (max-width: 1000px) {
+    .h1{
+        font-size: 24px;
+    }
+    .main{
+        padding:0px 25px;
+        padding-top: 150px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+    .pagination{
+        gap:50px;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+    .progress{
+        width: 100%;
+    }
+    .downloadStars{
+        display: none;
+    }
+    .programs{
+        flex-wrap: wrap;
+    }
+    .profileWrapper{
+        flex-wrap: wrap;
+    }
+    .profileCard{
+        min-width: 120px;
+    }
+
 }