исправил карточки категорий

src/features/catalog/Catalog.module.css

@@ -56,6 +56,41 @@
   object-fit: contain;
 }
 
+.categoryCard {
+  min-height: 0;
+  padding: 0;
+  justify-content: flex-start;
+}
+
+.categoryImageFrame {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  overflow: hidden;
+  aspect-ratio: 1 / 1;
+  background: #f5f7fa;
+}
+
+.categoryImageFrame .img {
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  margin: 0;
+  object-fit: cover;
+  transition: transform 0.28s ease;
+}
+
+.categoryCard:hover .img {
+  transform: scale(1.04);
+}
+
+.categoryCard .name {
+  min-height: 76px;
+  padding: 16px 18px 18px;
+  display: flex;
+  align-items: center;
+}
+
 .productCard {
   min-height: 0;
   padding: 0;
@@ -302,10 +337,6 @@ button:disabled {
   transform: none;
 }
 
-.categoryCard {
-  position: relative;
-}
-
 @media (max-width: 1090px) {
   .grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -328,6 +359,21 @@ button:disabled {
     max-width: 150px;
   }
 
+  .categoryCard {
+    min-height: 0;
+    padding: 0;
+  }
+
+  .categoryImageFrame .img {
+    height: 100%;
+    max-width: none;
+  }
+
+  .categoryCard .name {
+    min-height: 68px;
+    padding: 14px 16px 16px;
+  }
+
   .productCard {
     min-height: 0;
     padding: 0;

src/features/catalog/CategoryCards.tsx

@@ -19,8 +19,14 @@ const CategoryCards: React.FC = () => {
   return (
     <div className={styles.grid}>
       {categories.map(c => (
-        <div key={c.id} className={styles.card} onClick={() => onSelect(c.id)}>
+        <div key={c.id} className={`${styles.card} ${styles.categoryCard}`} onClick={() => onSelect(c.id)}>
-          {c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
+          <div className={styles.categoryImageFrame}>
+            <img
+              src={c.image || "/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png"}
+              alt={c.name}
+              className={styles.img}
+            />
+          </div>
           <div className={styles.name}>{c.name}</div>
         </div>
       ))}