закончил адаптацию стилей

src/pages/ItemPage/ItemPage.module.css

@@ -10,6 +10,7 @@
 }
 
 .short{
+  font-size: 14px;
   margin-top: 30px;
   margin-bottom: 40px;
 }
@@ -59,6 +60,7 @@
 }
 
 .breadcrumbs {
+  font-size: 16px;
   color: #f5c400;
   margin-bottom: 20px;
 }
@@ -101,4 +103,171 @@
   justify-content: space-between;
   padding: 10px 0;
   border-bottom: 1px solid #eee;
-}
+}
+
+.title{
+  font-size: 28px;
+}
+
+@media (max-width: 1024px) {
+  .hero {
+    flex-direction: column-reverse;
+  }
+
+  .top {
+    padding: 20px;
+    padding-top: 100px;
+  }
+
+  .right {
+    padding: 50px;
+  }
+
+  .rightContent {
+    padding-right: 100px;
+  }
+
+  .left img {
+    max-width: 300px;
+  }
+
+  .left{
+    padding: 20px;
+  }
+}
+
+/* ================= MOBILE ================= */
+
+@media (max-width: 768px) {
+  .top {
+    padding: 15px 20px;
+    padding-top: 100px;
+    
+  }
+
+  .hero {
+    flex-direction: column-reverse;
+  }
+
+  .left {
+    padding: 20px;
+  }
+
+  .left img {
+    max-width: 250px;
+  }
+
+  .right {
+    padding: 30px 20px;
+  }
+
+  .breadcrumbs{
+    font-size: 14px;
+  }
+
+  .title{
+    font-size: 20px;
+  }
+
+  .short {
+    margin-top: 20px;
+    margin-bottom: 25px;
+    font-size: 10px;
+  }
+
+  .download {
+    width: 100%;
+    padding: 14px;
+    text-align: center;
+  }
+
+  .tabs {
+    flex-direction: column;
+  }
+
+  .tabs button {
+    padding: 14px;
+    font-size: 14px;
+  }
+
+  .content {
+    padding: 20px;
+  }
+
+  .attrRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+}
+
+@media (max-width: 665){
+  .download {
+    font-size: 14px;
+  }
+
+  .tabs button {
+    font-size: 14px;
+  }
+
+  .short{
+  margin-top: 30px;
+  margin-bottom: 40px;
+}
+
+.back {
+  color: white;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.hero {
+  display: flex;
+  min-height: 500px;
+}
+
+.left {
+  flex: 1;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.left img {
+  max-width: 400px;
+}
+
+.rightContent{
+  padding-right: 100px;
+  
+}
+
+}
+
+/* ================= SMALL MOBILE ================= */
+
+@media (max-width: 480px) {
+  .top {
+    padding-top: 100px;
+  }
+
+  .left img {
+    max-width: 200px;
+  }
+
+  .right {
+    padding: 20px 15px;
+  }
+
+  .download {
+    font-size: 14px;
+  }
+
+  .tabs button {
+    font-size: 13px;
+  }
+}
+

src/pages/ItemPage/ItemPage.tsx

@@ -7,7 +7,7 @@ import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories"
 import Button from "../../components/Button/Button";
 import PriceLisForm from "../../components/PriceLisForm/PriceLisForm";
 import ProductAttributes from "../../components/Table/ProducTable";
-import { p } from "framer-motion/client";
+import { p, title } from "framer-motion/client";
 
 const ItemPage = () => {
   const { id } = useParams();
@@ -50,7 +50,7 @@ const ItemPage = () => {
             ГЛАВНАЯ / {category?.name} / {product.name}
           </div>
 
-          <h1>{product.name}</h1>
+          <h1 className={styles.title}>{product.name}</h1>
 
           <p className={styles.short}>{product.description}</p>
           <Button

src/pages/Products/Products.module.css

@@ -214,9 +214,7 @@
     flex-direction: column;
   }
 
-  .sidebar {
-    width: 100%;
-  }
+  
 
   .catalogLayout {
     flex-direction: column;
@@ -229,4 +227,12 @@
   .grid {
     grid-template-columns: 1fr;
   }
+}
+
+@media (max-width: 600px){
+  .products {
+    width: 150px;
+}
+
+
 }