fix: responsive landing width

UI fix related to this issue 

<img width="812" height="389" alt="Captura de pantalla 2025-07-11 a
la(s) 4 20 18 p  m"
src="https://github.com/user-attachments/assets/f2d09fcc-d293-4afe-b394-193ebee239fb"
/>

now: 

<img width="1393" height="971" alt="Captura de pantalla 2025-07-11 a
la(s) 3 58 24 p  m"
src="https://github.com/user-attachments/assets/25156185-3870-4cb0-9670-079ac7083bf0"
/>
<img width="1393" height="971" alt="Captura de pantalla 2025-07-11 a
la(s) 3 58 42 p  m"
src="https://github.com/user-attachments/assets/7f83fab5-ffe3-4008-88fe-1df78853a540"
/>
<img width="1393" height="971" alt="Captura de pantalla 2025-07-11 a
la(s) 3 58 53 p  m"
src="https://github.com/user-attachments/assets/96b07740-55fe-48b5-9941-aa754e797d13"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
  * Improved readability and formatting of category card styles.
* Enhanced responsive design for category cards, titles, and icons on
various screen sizes.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: 0xLeopoldo

packages/common-config/src/components/CategoryCards/styles.module.css

@@ -36,7 +36,11 @@
   left: 0;
   width: 100%;
   height: 4px;
-  background: linear-gradient(89.99deg, var(--gradient-start) 30%, var(--gradient-end) 100%);
+  background: linear-gradient(
+    89.99deg,
+    var(--gradient-start) 30%,
+    var(--gradient-end) 100%
+  );
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.4s ease;
@@ -48,7 +52,8 @@
 
 .categoryCard:hover {
   transform: translateY(-4px) scale(1.02);
-  box-shadow: 0 4px 30px rgba(31, 85, 213, 0.2),
+  box-shadow:
+    0 4px 30px rgba(31, 85, 213, 0.2),
     0 0 20px rgba(233, 91, 155, 0.2);
   border-color: rgba(255, 255, 255, 0.3);
 }
@@ -71,7 +76,11 @@
 }
 
 .categoryTitle {
-  font-family: "Sharp Grotesk", system-ui, -apple-system, sans-serif;
+  font-family:
+    "Sharp Grotesk",
+    system-ui,
+    -apple-system,
+    sans-serif;
   font-weight: 500;
   font-size: 1rem;
   line-height: 0.7;
@@ -97,13 +106,26 @@
 
 @media (max-width: 1200px) {
   .categoryCards {
-    grid-template-columns: repeat(2, 1fr);
     margin-bottom: 5rem;
   }
 
   .categoryCard {
     width: 100%;
   }
+
+  .categoryTitle {
+    font-size: 0.8rem;
+  }
+  .categoryIcon {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+@media (max-width: 1100px) {
+  .categoryCards {
+    margin-bottom: 4.5rem;
+  }
 }
 
 @media (max-width: 1024px) {
@@ -112,10 +134,19 @@
   }
 }
 
-@media (max-width: 1100px) {
+@media (max-width: 996px) {
   .categoryCards {
+    grid-template-columns: repeat(2, 1fr);
     margin-bottom: 5rem;
   }
+
+  .categoryTitle {
+    font-size: 1rem;
+  }
+  .categoryIcon {
+    width: 40px;
+    height: 40px;
+  }
 }
 
 @media (max-width: 600px) {