making it mobile friendly

css/sections/projects.css

@@ -1,5 +1,4 @@
 .projects-section {
-    flex: 0 0 340px;
     display: flex;
     flex-direction: column;
     gap: var(--space-md);
@@ -10,8 +9,8 @@
     border-radius: var(--border-radius-large);
     box-shadow: var(--shadow-md), var(--inset-shadow);
     border-bottom: 1px solid var(--glass-border);
-    min-width: 380px;
-    max-width: 440px;
+    min-width: 0;
+    width: 100%;
     align-self: stretch;
 }
 
@@ -112,13 +111,11 @@
     flex-wrap: nowrap;
 }
 
-/* Keep long titles from pushing icons to a new line */
+/* Let titles wrap while keeping the action links available. */
 .project-title > span:first-child {
     flex: 1 1 auto;
     min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    overflow-wrap: anywhere;
 }
 
 .project-icon-link {
@@ -150,12 +147,16 @@
 /* Responsive                                                          */
 /* ------------------------------------------------------------------ */
 @media (max-width: 1024px) {
-    .projects-section {
-        flex: unset;
-        max-width: 100%;
-        margin-left: 0;
-        margin-top: var(--space-xl);
-        min-width: unset;
+    .project-icon-link {
+        width: 44px;
+        height: 44px;
+    }
+}
+
+@media (pointer: coarse) {
+    .project-icon-link {
+        width: 44px;
+        height: 44px;
     }
 }
 
@@ -179,7 +180,7 @@
     }
 
     .projects-title {
-        font-size: var(--text-sm);
+        font-size: var(--text-md);
     }
 
     .project {
@@ -191,7 +192,7 @@
     }
 
     .project-desc {
-        font-size: var(--text-xs);
+        font-size: var(--text-sm);
     }
 
     .project-icons {
@@ -205,7 +206,7 @@
     }
 
     .project-title {
-        font-size: var(--text-xs);
+        font-size: var(--text-sm);
         flex-direction: row;
         align-items: center;
         gap: var(--space-xs);