feat: make portfolio frame fluid below 1440px

src/styles/globals.css

@@ -26,21 +26,22 @@ html[data-theme="dark"] {
 
 body {
   width: 100%;
-  min-width: 1440px;
+  min-width: 320px;
   background-color: var(--bg-page);
   color: var(--text-primary);
   font-family: 'IRANYekanXVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-synthesis: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  overflow-x: auto;
+  overflow-x: hidden;
   transition: background-color 0.25s ease, color 0.25s ease;
 }
 
 /* Master 1440px Fixed Canvas */
 .desktop-canvas {
-  width: 1440px;
-  min-width: 1440px;
+  width: 100%;
+  max-width: var(--layout-frame);
+  min-width: 0;
   margin: 0 auto;
   position: relative;
   background-color: var(--bg-page);
@@ -49,11 +50,39 @@ body {
 
 /* 1320px Inner Content Container with 60px Gutters */
 .content-container {
-  width: 1320px;
+  width: calc(100% - (2 * var(--layout-page-gutter)));
+  max-width: var(--layout-container);
   margin: 0 auto;
   position: relative;
 }
 
+@media (max-width: 1024px) {
+  :root {
+    --layout-page-gutter: 32px;
+    --layout-section-padding: 80px;
+  }
+}
+
+@media (max-width: 640px) {
+  :root {
+    --layout-page-gutter: 20px;
+    --layout-section-padding: 64px;
+  }
+
+  .section-header {
+    margin-bottom: var(--space-6);
+  }
+
+  .section-title {
+    font-size: 28px;
+    line-height: 38px;
+  }
+
+  .section-underline {
+    width: 88px;
+  }
+}
+
 /* Common Section Header Component Styles */
 .section-header {
   display: flex;
@@ -153,6 +182,19 @@ body {
   box-shadow: 0 4px 12px var(--shadow-color);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *, *::before, *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
 a {
   color: inherit;
   text-decoration: none;