feat: adapt portfolio sections for smaller screens

src/components/EducationSection.module.css

@@ -14,11 +14,9 @@
   display: flex;
   align-items: center;
   gap: 36px;
-  transition: border-color 0.2s ease;
-}
-
-.card:hover {
-  border-color: var(--accent-default);
+  transition:
+    border-color var(--motion-duration-fast) ease,
+    transform var(--motion-duration-default) var(--motion-ease-out);
 }
 
 .crestCol {
@@ -87,3 +85,37 @@
 [data-theme="dark"] .card {
   background-color: var(--bg-surface);
 }
+
+@media (max-width: 760px) {
+  .educationSection {
+    padding-top: var(--space-8);
+  }
+
+  .card {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--space-4);
+    padding: var(--space-5);
+  }
+
+  .crestCol,
+  .crestContainer {
+    width: 180px;
+    height: 132px;
+  }
+}
+
+@media (max-width: 480px) {
+  .crestCol,
+  .crestContainer {
+    width: 144px;
+    height: 108px;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    border-color: var(--accent-default);
+    transform: translateY(-2px);
+  }
+}