fix: responsive landing width

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) {