feat: adapt portfolio sections for smaller screens

src/components/FooterSection.module.css

@@ -65,12 +65,9 @@
   gap: 12px;
   color: var(--text-primary);
   text-decoration: none;
-  transition: color 0.2s ease, transform 0.2s ease;
-}
-
-.socialItem:hover {
-  color: var(--accent-default);
-  transform: translateY(-2px);
+  transition:
+    color var(--motion-duration-fast) ease,
+    transform var(--motion-duration-default) var(--motion-ease-out);
 }
 
 .socialItem:focus-visible {
@@ -104,3 +101,64 @@
   font-weight: 600;
   color: var(--text-primary);
 }
+
+@media (max-width: 900px) {
+  .footerSection {
+    height: auto;
+    min-height: 480px;
+    padding: var(--space-10) var(--layout-page-gutter) var(--space-9);
+  }
+
+  .bgContainer {
+    height: 100%;
+  }
+
+  .content {
+    width: 100%;
+    margin-top: 0;
+  }
+
+  .socialRow {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-6) var(--space-8);
+  }
+}
+
+@media (max-width: 560px) {
+  .footerSection {
+    min-height: 560px;
+    padding-top: var(--space-9);
+  }
+
+  .ctaTitle {
+    font-size: 36px;
+    line-height: 46px;
+  }
+
+  .ctaSubtitle {
+    max-width: 300px;
+    margin-bottom: var(--space-7);
+    font-size: var(--font-size-body-default);
+    line-height: var(--line-height-body-default);
+    letter-spacing: 0.08em;
+  }
+
+  .socialRow {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    width: 100%;
+    gap: var(--space-6) var(--space-4);
+  }
+
+  .socialLabel {
+    overflow-wrap: anywhere;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .socialItem:hover {
+    color: var(--accent-default);
+    transform: translateY(-2px);
+  }
+}