feat: adapt portfolio sections for smaller screens

src/components/MilestonesSection.module.css

@@ -19,14 +19,12 @@
   padding: 24px 32px;
   display: flex;
   gap: 36px;
-  transition: border-color 0.2s ease;
+  transition:
+    border-color var(--motion-duration-fast) ease,
+    transform var(--motion-duration-default) var(--motion-ease-out);
   position: relative;
 }
 
-.certCard:hover {
-  border-color: var(--accent-default);
-}
-
 .thumbnailContainer {
   position: relative;
   width: 264px;
@@ -43,10 +41,6 @@
   transition: transform 0.3s ease;
 }
 
-.certCard:hover .certImage {
-  transform: scale(1.02);
-}
-
 .certDetails {
   flex-grow: 1;
   display: flex;
@@ -110,10 +104,44 @@
   transition: gap 0.2s ease;
 }
 
-.viewCertLink:hover {
-  gap: 10px;
-}
-
 [data-theme="dark"] .certCard {
   background-color: var(--bg-surface);
 }
+
+@media (max-width: 760px) {
+  .milestonesSection {
+    padding-top: var(--space-8);
+    padding-bottom: var(--space-9);
+  }
+
+  .certCard {
+    flex-direction: column;
+    gap: var(--space-5);
+    padding: var(--space-5);
+  }
+
+  .thumbnailContainer {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 11 / 8;
+  }
+
+  .actionRow {
+    justify-content: flex-start;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .certCard:hover {
+    border-color: var(--accent-default);
+    transform: translateY(-2px);
+  }
+
+  .certCard:hover .certImage {
+    transform: scale(1.02);
+  }
+
+  .viewCertLink:hover {
+    gap: 10px;
+  }
+}