feat: adapt portfolio sections for smaller screens

src/components/ExperienceSection.module.css

@@ -34,7 +34,9 @@
   background-color: var(--color-slate-400);
   margin-top: 6px;
   z-index: 2;
-  transition: all 0.2s ease;
+  transition:
+    background-color var(--motion-duration-fast) ease,
+    box-shadow var(--motion-duration-default) ease;
 }
 
 .nodeCurrent {
@@ -183,3 +185,50 @@
   line-height: var(--line-height-body-small);
   color: var(--text-secondary);
 }
+
+@media (max-width: 900px) {
+  .experienceSection {
+    padding-top: var(--space-8);
+    padding-bottom: var(--space-9);
+  }
+
+  .timelineItem {
+    min-height: 0;
+  }
+
+  .itemContent {
+    flex-direction: column;
+    gap: var(--space-4);
+    padding-bottom: var(--space-7);
+  }
+
+  .identityCol,
+  .detailsCol {
+    width: 100%;
+    max-width: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .spineColumn {
+    width: 24px;
+  }
+
+  .itemContent {
+    padding-left: var(--space-3);
+  }
+
+  .metaRow {
+    flex-wrap: wrap;
+  }
+
+  .logoContainer {
+    width: 60px;
+    height: 60px;
+  }
+
+  .roleTitle {
+    font-size: 18px;
+    line-height: 26px;
+  }
+}