making it mobile friendly

css/sections/hero.css

@@ -5,17 +5,18 @@
     padding: var(--space-2xl);
     width: 100%;
     display: grid;
-    grid-template-columns: 200px 1fr;
+    grid-template-columns: 180px minmax(0, 1fr);
     gap: var(--space-xl);
     align-items: center;
     animation: fadeInUp 0.8s var(--ease-out-expo);
 }
 
 .hero-details {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
     gap: var(--space-sm);
-    align-items: flex-start;
+    align-items: stretch;
+    min-width: 0;
     width: 100%;
     justify-content: flex-start;
 }
@@ -153,7 +154,6 @@
 /* ------------------------------------------------------------------ */
 @media (max-width: 1024px) {
     .hero-details {
-        flex-direction: column;
         gap: var(--space-xl);
     }
 
@@ -166,6 +166,10 @@
         width: 100%;
         align-items: stretch;
     }
+
+    .tech-tags {
+        justify-content: center;
+    }
 }
 
 @media (max-width: 768px) {
@@ -176,8 +180,13 @@
         text-align: center;
     }
 
+    .hero-details {
+        grid-template-columns: minmax(0, 1fr);
+        gap: var(--space-lg);
+    }
+
     .name {
-        font-size: var(--text-xl);
+        font-size: var(--text-2xl);
     }
 
     .social-links {
@@ -191,35 +200,24 @@
         padding: var(--space-lg) var(--space-md);
     }
 
-    .name {
-        font-size: var(--text-lg);
-    }
-
     .social-links {
-        gap: var(--space-xs);
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: var(--space-sm);
     }
 
     .social-link {
         padding: var(--space-sm) var(--space-md);
-        font-size: var(--text-xs);
+        font-size: var(--text-sm);
         min-width: 0;
-        flex: 1;
-        max-width: calc(50% - 6px);
         justify-content: center;
     }
 
-    .social-link span {
-        display: none;
+    .social-link:last-child {
+        grid-column: 1 / -1;
     }
 
     .social-link i {
         font-size: 16px;
     }
 }
-
-@media (max-width: 380px) {
-    .social-link {
-        max-width: calc(100% / 2 - 6px);
-        padding: var(--space-sm);
-    }
-}