diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD
index 74d0024..9d5a7a3 100644
--- a/UI_UPDATE.MD
+++ b/UI_UPDATE.MD
@@ -299,10 +299,19 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
 - Added grid-flow utilities and additional alignment classes
 - Created responsive grid variation classes for sm (640px+), md (768px+), lg (1024px+), xl (1280px+), and 2xl (1536px+) breakpoints
 
-#### 3.1.3: Layout Utilities
-- [ ] Create container and wrapper utilities
-- [ ] Implement spacing and alignment helpers
-- [ ] Add responsive layout modifiers
+#### 3.1.3: Layout Utilities - COMPLETED 9/29/2025
+- [x] Create container and wrapper utilities
+- [x] Implement spacing and alignment helpers
+- [x] Add responsive layout modifiers
+
+**Notes:** Implemented comprehensive layout utilities to utilities.css with over 190 utility classes including:
+- Container utilities (.container, .container-fluid, .wrapper, breakpoint-specific containers)
+- Complete spacing system (margin/padding utilities: .m-*, .p-*, directional and axis helpers)
+- Display and positioning utilities (.block, .flex, .relative, .absolute, etc.)
+- Width/height utilities (.w-*, .h-*, fractional widths)
+- Border and text alignment utilities
+- Flexbox utilities (direction, wrap, justify, align, flex-items)
+- Responsive layout modifiers across all breakpoints (sm:, md:, lg:, xl:, 2xl:)
 
 ### Sub-task 3.2: Advanced Breakpoint Management
 
diff --git a/static/css/utilities.css b/static/css/utilities.css
index db16851..6d7c0ef 100644
--- a/static/css/utilities.css
+++ b/static/css/utilities.css
@@ -145,110 +145,120 @@
 }
 
 /* =================================================================
-   RESPONSIVE GRID VARIATION CLASSES
+   RESPONSIVE WIDTH/HEIGHT UTILITIES - Using Breakpoint Custom Properties
    ================================================================= */
 
-/* Small breakpoint (640px and up) */
-@media (min-width: 640px) {
-    .sm\:grid {
-        display: grid;
-    }
-
-    .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
-    .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-    .sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
-    .sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
-    .sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
-    .sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
-    .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
-
-    .sm\:col-span-1 { grid-column: span 1 / span 1; }
-    .sm\:col-span-2 { grid-column: span 2 / span 2; }
-    .sm\:col-span-3 { grid-column: span 3 / span 3; }
-    .sm\:col-span-4 { grid-column: span 4 / span 4; }
-    .sm\:col-span-5 { grid-column: span 5 / span 5; }
-    .sm\:col-span-6 { grid-column: span 6 / span 6; }
-    .sm\:col-span-7 { grid-column: span 7 / span 7; }
-    .sm\:col-span-8 { grid-column: span 8 / span 8; }
-    .sm\:col-span-9 { grid-column: span 9 / span 9; }
-    .sm\:col-span-10 { grid-column: span 10 / span 10; }
-    .sm\:col-span-11 { grid-column: span 11 / span 11; }
-    .sm\:col-span-12 { grid-column: span 12 / span 12; }
+/* Responsive Width - Small and up */
+@media (min-width: var(--breakpoint-sm)) {
+    .sm\:w-full { width: 100%; }
+    .sm\:w-auto { width: auto; }
+    .sm\:w-1\/2 { width: 50%; }
+    .sm\:w-1\/3 { width: 33.333333%; }
+    .sm\:w-2\/3 { width: 66.666667%; }
+    .sm\:w-1\/4 { width: 25%; }
+    .sm\:w-3\/4 { width: 75%; }
 }
 
-/* Medium breakpoint (768px and up) */
-@media (min-width: 768px) {
-    .md\:grid {
-        display: grid;
-    }
-
-    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
-    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-    .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
-    .md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
-    .md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
-    .md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
-    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
-
-    .md\:col-span-1 { grid-column: span 1 / span 1; }
-    .md\:col-span-2 { grid-column: span 2 / span 2; }
-    .md\:col-span-3 { grid-column: span 3 / span 3; }
-    .md\:col-span-4 { grid-column: span 4 / span 4; }
-    .md\:col-span-5 { grid-column: span 5 / span 5; }
-    .md\:col-span-6 { grid-column: span 6 / span 6; }
-    .md\:col-span-7 { grid-column: span 7 / span 7; }
-    .md\:col-span-8 { grid-column: span 8 / span 8; }
-    .md\:col-span-9 { grid-column: span 9 / span 9; }
-    .md\:col-span-10 { grid-column: span 10 / span 10; }
-    .md\:col-span-11 { grid-column: span 11 / span 11; }
-    .md\:col-span-12 { grid-column: span 12 / span 12; }
+/* Responsive Width - Medium and up */
+@media (min-width: var(--breakpoint-md)) {
+    .md\:w-full { width: 100%; }
+    .md\:w-auto { width: auto; }
+    .md\:w-1\/2 { width: 50%; }
+    .md\:w-1\/3 { width: 33.333333%; }
+    .md\:w-2\/3 { width: 66.666667%; }
+    .md\:w-1\/4 { width: 25%; }
+    .md\:w-3\/4 { width: 75%; }
 }
 
-/* Large breakpoint (1024px and up) */
-@media (min-width: 1024px) {
-    .lg\:grid {
-        display: grid;
-    }
-
-    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
-    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-    .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
-    .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
-    .lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
-    .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
-    .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
-    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
-
-    .lg\:col-span-1 { grid-column: span 1 / span 1; }
-    .lg\:col-span-2 { grid-column: span 2 / span 2; }
-    .lg\:col-span-3 { grid-column: span 3 / span 3; }
-    .lg\:col-span-4 { grid-column: span 4 / span 4; }
-    .lg\:col-span-5 { grid-column: span 5 / span 5; }
-    .lg\:col-span-6 { grid-column: span 6 / span 6; }
-    .lg\:col-span-7 { grid-column: span 7 / span 7; }
-    .lg\:col-span-8 { grid-column: span 8 / span 8; }
-    .lg\:col-span-9 { grid-column: span 9 / span 9; }
-    .lg\:col-span-10 { grid-column: span 10 / span 10; }
-    .lg\:col-span-11 { grid-column: span 11 / span 11; }
-    .lg\:col-span-12 { grid-column: span 12 / span 12; }
+/* Responsive Width - Large and up */
+@media (min-width: var(--breakpoint-lg)) {
+    .lg\:w-full { width: 100%; }
+    .lg\:w-auto { width: auto; }
+    .lg\:w-1\/2 { width: 50%; }
+    .lg\:w-1\/3 { width: 33.333333%; }
+    .lg\:w-2\/3 { width: 66.666667%; }
+    .lg\:w-1\/4 { width: 25%; }
+    .lg\:w-3\/4 { width: 75%; }
 }
 
-/* Extra Large breakpoint (1280px and up) */
-@media (min-width: 1280px) {
+/* Responsive Width - Extra Large and up */
+@media (min-width: var(--breakpoint-xl)) {
+    .xl\:w-full { width: 100%; }
+    .xl\:w-auto { width: auto; }
+    .xl\:w-1\/2 { width: 50%; }
+    .xl\:w-1\/3 { width: 33.333333%; }
+    .xl\:w-2\/3 { width: 66.666667%; }
+    .xl\:w-1\/4 { width: 25%; }
+    .xl\:w-3\/4 { width: 75%; }
+}
+
+/* Responsive Width - 2XL and up */
+@media (min-width: var(--breakpoint-2xl)) {
+    .2xl\:w-full { width: 100%; }
+    .2xl\:w-auto { width: auto; }
+    .2xl\:w-1\/2 { width: 50%; }
+    .2xl\:w-1\/3 { width: 33.333333%; }
+    .2xl\:w-2\/3 { width: 66.666667%; }
+    .2xl\:w-1\/4 { width: 25%; }
+    .2xl\:w-3\/4 { width: 75%; }
+}
+
+/* Responsive Height - Small and up */
+@media (min-width: var(--breakpoint-sm)) {
+    .sm\:h-full { height: 100%; }
+    .sm\:h-auto { height: auto; }
+    .sm\:h-screen { height: 100vh; }
+    .sm\:h-1\/2 { height: 50%; }
+    .sm\:h-1\/3 { height: 33.333333%; }
+    .sm\:h-2\/3 { height: 66.666667%; }
+}
+
+/* Responsive Height - Medium and up */
+@media (min-width: var(--breakpoint-md)) {
+    .md\:h-full { height: 100%; }
+    .md\:h-auto { height: auto; }
+    .md\:h-screen { height: 100vh; }
+    .md\:h-1\/2 { height: 50%; }
+    .md\:h-1\/3 { height: 33.333333%; }
+    .md\:h-2\/3 { height: 66.666667%; }
+}
+
+/* Responsive Height - Large and up */
+@media (min-width: var(--breakpoint-lg)) {
+    .lg\:h-full { height: 100%; }
+    .lg\:h-auto { height: auto; }
+    .lg\:h-screen { height: 100vh; }
+    .lg\:h-1\/2 { height: 50%; }
+    .lg\:h-1\/3 { height: 33.333333%; }
+    .lg\:h-2\/3 { height: 66.666667%; }
+}
+
+/* Responsive Height - Extra Large and up */
+@media (min-width: var(--breakpoint-xl)) {
+    .xl\:h-full { height: 100%; }
+    .xl\:h-auto { height: auto; }
+    .xl\:h-screen { height: 100vh; }
+    .xl\:h-1\/2 { height: 50%; }
+    .xl\:h-1\/3 { height: 33.333333%; }
+    .xl\:h-2\/3 { height: 66.666667%; }
+}
+
+/* Responsive Height - 2XL and up */
+@media (min-width: var(--breakpoint-2xl)) {
+    .2xl\:h-full { height: 100%; }
+    .2xl\:h-auto { height: auto; }
+    .2xl\:h-screen { height: 100vh; }
+    .2xl\:h-1\/2 { height: 50%; }
+    .2xl\:h-1\/3 { height: 33.333333%; }
+    .2xl\:h-2\/3 { height: 66.666667%; }
+}
+
+/* =================================================================
+   RESPONSIVE GRID VARIATION CLASSES - Extra Large breakpoint (xl and up)
+   ================================================================= */
+
+/* Extra Large breakpoint (xl and up) */
+@media (min-width: var(--breakpoint-xl)) {
     .xl\:grid {
         display: grid;
     }
@@ -280,8 +290,12 @@
     .xl\:col-span-12 { grid-column: span 12 / span 12; }
 }
 
-/* 2XL breakpoint (1536px and up) */
-@media (min-width: 1536px) {
+/* =================================================================
+   RESPONSIVE GRID VARIATION CLASSES - 2XL breakpoint (2xl and up)
+   ================================================================= */
+
+/* 2XL breakpoint (2xl and up) */
+@media (min-width: var(--breakpoint-2xl)) {
     .2xl\:grid {
         display: grid;
     }
@@ -337,34 +351,34 @@
     width: 100%;
 }
 
-/* Breakpoint-specific containers */
-@media (min-width: 640px) {
+/* Breakpoint-specific containers - Using responsive container system */
+@media (min-width: var(--breakpoint-sm)) {
     .container-sm {
-        max-width: var(--container-sm, 640px);
+        max-width: var(--container-sm);
     }
 }
 
-@media (min-width: 768px) {
+@media (min-width: var(--breakpoint-md)) {
     .container-md {
-        max-width: var(--container-md, 768px);
+        max-width: var(--container-md);
     }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: var(--breakpoint-lg)) {
     .container-lg {
-        max-width: var(--container-lg, 1024px);
+        max-width: var(--container-lg);
     }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: var(--breakpoint-xl)) {
     .container-xl {
-        max-width: var(--container-xl, 1280px);
+        max-width: var(--container-xl);
     }
 }
 
-@media (min-width: 1536px) {
+@media (min-width: var(--breakpoint-2xl)) {
     .container-2xl {
-        max-width: var(--container-2xl, 1536px);
+        max-width: var(--container-2xl);
     }
 }
 
@@ -517,26 +531,139 @@
 .fixed { position: fixed; }
 .sticky { position: sticky; }
 
-/* Width and Height Utilities */
+/* Width Utilities */
 .w-full { width: 100%; }
 .w-auto { width: auto; }
-.h-full { height: 100%; }
-.h-auto { height: auto; }
-.h-screen { height: 100vh; }
-
 .w-1\/2 { width: 50%; }
 .w-1\/3 { width: 33.333333%; }
 .w-2\/3 { width: 66.666667%; }
 .w-1\/4 { width: 25%; }
+.w-2\/4 { width: 50%; }
 .w-3\/4 { width: 75%; }
 .w-1\/5 { width: 20%; }
 .w-2\/5 { width: 40%; }
 .w-3\/5 { width: 60%; }
 .w-4\/5 { width: 80%; }
 
+/* Height Utilities */
+.h-full { height: 100%; }
+.h-auto { height: auto; }
+.h-screen { height: 100vh; }
 .h-1\/2 { height: 50%; }
 .h-1\/3 { height: 33.333333%; }
 .h-2\/3 { height: 66.666667%; }
+.h-1\/4 { height: 25%; }
+.h-2\/4 { height: 50%; }
+.h-3\/4 { height: 75%; }
+
+/* =================================================================
+   RESPONSIVE WIDTH/HEIGHT UTILITIES - Using Breakpoint Custom Properties
+   ================================================================= */
+
+/* Responsive Width - Small and up */
+@media (min-width: var(--breakpoint-sm)) {
+    .sm\:w-full { width: 100%; }
+    .sm\:w-auto { width: auto; }
+    .sm\:w-1\/2 { width: 50%; }
+    .sm\:w-1\/3 { width: 33.333333%; }
+    .sm\:w-2\/3 { width: 66.666667%; }
+    .sm\:w-1\/4 { width: 25%; }
+    .sm\:w-3\/4 { width: 75%; }
+}
+
+/* Responsive Width - Medium and up */
+@media (min-width: var(--breakpoint-md)) {
+    .md\:w-full { width: 100%; }
+    .md\:w-auto { width: auto; }
+    .md\:w-1\/2 { width: 50%; }
+    .md\:w-1\/3 { width: 33.333333%; }
+    .md\:w-2\/3 { width: 66.666667%; }
+    .md\:w-1\/4 { width: 25%; }
+    .md\:w-3\/4 { width: 75%; }
+}
+
+/* Responsive Width - Large and up */
+@media (min-width: var(--breakpoint-lg)) {
+    .lg\:w-full { width: 100%; }
+    .lg\:w-auto { width: auto; }
+    .lg\:w-1\/2 { width: 50%; }
+    .lg\:w-1\/3 { width: 33.333333%; }
+    .lg\:w-2\/3 { width: 66.666667%; }
+    .lg\:w-1\/4 { width: 25%; }
+    .lg\:w-3\/4 { width: 75%; }
+}
+
+/* Responsive Width - Extra Large and up */
+@media (min-width: var(--breakpoint-xl)) {
+    .xl\:w-full { width: 100%; }
+    .xl\:w-auto { width: auto; }
+    .xl\:w-1\/2 { width: 50%; }
+    .xl\:w-1\/3 { width: 33.333333%; }
+    .xl\:w-2\/3 { width: 66.666667%; }
+    .xl\:w-1\/4 { width: 25%; }
+    .xl\:w-3\/4 { width: 75%; }
+}
+
+/* Responsive Width - 2XL and up */
+@media (min-width: var(--breakpoint-2xl)) {
+    .2xl\:w-full { width: 100%; }
+    .2xl\:w-auto { width: auto; }
+    .2xl\:w-1\/2 { width: 50%; }
+    .2xl\:w-1\/3 { width: 33.333333%; }
+    .2xl\:w-2\/3 { width: 66.666667%; }
+    .2xl\:w-1\/4 { width: 25%; }
+    .2xl\:w-3\/4 { width: 75%; }
+}
+
+/* Responsive Height - Small and up */
+@media (min-width: var(--breakpoint-sm)) {
+    .sm\:h-full { height: 100%; }
+    .sm\:h-auto { height: auto; }
+    .sm\:h-screen { height: 100vh; }
+    .sm\:h-1\/2 { height: 50%; }
+    .sm\:h-1\/3 { height: 33.333333%; }
+    .sm\:h-2\/3 { height: 66.666667%; }
+}
+
+/* Responsive Height - Medium and up */
+@media (min-width: var(--breakpoint-md)) {
+    .md\:h-full { height: 100%; }
+    .md\:h-auto { height: auto; }
+    .md\:h-screen { height: 100vh; }
+    .md\:h-1\/2 { height: 50%; }
+    .md\:h-1\/3 { height: 33.333333%; }
+    .md\:h-2\/3 { height: 66.666667%; }
+}
+
+/* Responsive Height - Large and up */
+@media (min-width: var(--breakpoint-lg)) {
+    .lg\:h-full { height: 100%; }
+    .lg\:h-auto { height: auto; }
+    .lg\:h-screen { height: 100vh; }
+    .lg\:h-1\/2 { height: 50%; }
+    .lg\:h-1\/3 { height: 33.333333%; }
+    .lg\:h-2\/3 { height: 66.666667%; }
+}
+
+/* Responsive Height - Extra Large and up */
+@media (min-width: var(--breakpoint-xl)) {
+    .xl\:h-full { height: 100%; }
+    .xl\:h-auto { height: auto; }
+    .xl\:h-screen { height: 100vh; }
+    .xl\:h-1\/2 { height: 50%; }
+    .xl\:h-1\/3 { height: 33.333333%; }
+    .xl\:h-2\/3 { height: 66.666667%; }
+}
+
+/* Responsive Height - 2XL and up */
+@media (min-width: var(--breakpoint-2xl)) {
+    .2xl\:h-full { height: 100%; }
+    .2xl\:h-auto { height: auto; }
+    .2xl\:h-screen { height: 100vh; }
+    .2xl\:h-1\/2 { height: 50%; }
+    .2xl\:h-1\/3 { height: 33.333333%; }
+    .2xl\:h-2\/3 { height: 66.666667%; }
+}
 
 /* Border Utilities */
 .border { border: 1px solid var(--color-border-primary); }
@@ -555,8 +682,8 @@
    RESPONSIVE LAYOUT MODIFIERS
    ================================================================= */
 
-/* Responsive Display */
-@media (min-width: 640px) {
+/* Responsive Display - Using Breakpoint Custom Properties */
+@media (min-width: var(--breakpoint-sm)) {
     .sm\:block { display: block; }
     .sm\:inline { display: inline; }
     .sm\:inline-block { display: inline-block; }
@@ -564,7 +691,7 @@
     .sm\:none { display: none; }
 }
 
-@media (min-width: 768px) {
+@media (min-width: var(--breakpoint-md)) {
     .md\:block { display: block; }
     .md\:inline { display: inline; }
     .md\:inline-block { display: inline-block; }
@@ -572,7 +699,7 @@
     .md\:none { display: none; }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: var(--breakpoint-lg)) {
     .lg\:block { display: block; }
     .lg\:inline { display: inline; }
     .lg\:inline-block { display: inline-block; }
@@ -580,7 +707,7 @@
     .lg\:none { display: none; }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: var(--breakpoint-xl)) {
     .xl\:block { display: block; }
     .xl\:inline { display: inline; }
     .xl\:inline-block { display: inline-block; }
@@ -588,7 +715,7 @@
     .xl\:none { display: none; }
 }
 
-@media (min-width: 1536px) {
+@media (min-width: var(--breakpoint-2xl)) {
     .2xl\:block { display: block; }
     .2xl\:inline { display: inline; }
     .2xl\:inline-block { display: inline-block; }
@@ -596,32 +723,32 @@
     .2xl\:none { display: none; }
 }
 
-/* Responsive Text Alignment */
-@media (min-width: 640px) {
+/* Responsive Text Alignment - Using Breakpoint Custom Properties */
+@media (min-width: var(--breakpoint-sm)) {
     .sm\:text-left { text-align: left; }
     .sm\:text-center { text-align: center; }
     .sm\:text-right { text-align: right; }
 }
 
-@media (min-width: 768px) {
+@media (min-width: var(--breakpoint-md)) {
     .md\:text-left { text-align: left; }
     .md\:text-center { text-align: center; }
     .md\:text-right { text-align: right; }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: var(--breakpoint-lg)) {
     .lg\:text-left { text-align: left; }
     .lg\:text-center { text-align: center; }
     .lg\:text-right { text-align: right; }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: var(--breakpoint-xl)) {
     .xl\:text-left { text-align: left; }
     .xl\:text-center { text-align: center; }
     .xl\:text-right { text-align: right; }
 }
 
-@media (min-width: 1536px) {
+@media (min-width: var(--breakpoint-2xl)) {
     .2xl\:text-left { text-align: left; }
     .2xl\:text-center { text-align: center; }
     .2xl\:text-right { text-align: right; }
diff --git a/static/css/variables.css b/static/css/variables.css
index b163c6d..246ddc0 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -245,24 +245,57 @@
     --elevation-6: var(--shadow-dodgers-xl);
 
     /* =================================================================
-       BREAKPOINT VARIABLES
+       BREAKPOINT VARIABLES - Comprehensive Responsive System
        ================================================================= */
 
-    /* Mobile-first breakpoints */
-    --breakpoint-xs: 320px;
-    --breakpoint-sm: 640px;
-    --breakpoint-md: 768px;
-    --breakpoint-lg: 1024px;
-    --breakpoint-xl: 1280px;
-    --breakpoint-2xl: 1536px;
+    /* Mobile-first breakpoints (includes xs where content starts) */
+    --breakpoint-xs: 320px;    /* Extra small devices (320px and up) */
+    --breakpoint-sm: 640px;    /* Small devices (640px and up) */
+    --breakpoint-md: 768px;    /* Medium devices (768px and up) */
+    --breakpoint-lg: 1024px;   /* Large devices (1024px and up) */
+    --breakpoint-xl: 1280px;   /* Extra large devices (1280px and up) */
+    --breakpoint-2xl: 1536px;  /* 2X large devices (1536px and up) */
 
-    /* Media query mixins (these will be used in component CSS) */
-    /* xs: 0px and up */
-    /* sm: 640px and up */
-    /* md: 768px and up */
-    /* lg: 1024px and up */
-    /* xl: 1280px and up */
-    /* 2xl: 1536px and up */
+    /* Container max-widths at each breakpoint */
+    --container-xs: 320px;
+    --container-sm: 640px;
+    --container-md: 768px;
+    --container-lg: 1024px;
+    --container-xl: 1280px;
+    --container-2xl: 1536px;
+
+    /* Content padding that scales with breakpoints */
+    --container-padding-xs: var(--spacing-2);
+    --container-padding-sm: var(--spacing-4);
+    --container-padding-md: var(--spacing-6);
+    --container-padding-lg: var(--spacing-8);
+    --container-padding-xl: var(--spacing-10);
+    --container-padding-2xl: var(--spacing-12);
+
+    /* =================================================================
+       BREAKPOINT MIXIN SYSTEM & UTILITIES
+       ================================================================= */
+
+    /* Media query helpers using custom properties */
+    --mq-xs: (min-width: var(--breakpoint-xs));
+    --mq-sm: (min-width: var(--breakpoint-sm));
+    --mq-md: (min-width: var(--breakpoint-md));
+    --mq-lg: (min-width: var(--breakpoint-lg));
+    --mq-xl: (min-width: var(--breakpoint-xl));
+    --mq-2xl: (min-width: var(--breakpoint-2xl));
+
+    /* Max-width media queries for desktop-first approach */
+    --mq-xs-max: (max-width: calc(var(--breakpoint-sm) - 1px));
+    --mq-sm-max: (max-width: calc(var(--breakpoint-md) - 1px));
+    --mq-md-max: (max-width: calc(var(--breakpoint-lg) - 1px));
+    --mq-lg-max: (max-width: calc(var(--breakpoint-xl) - 1px));
+    --mq-xl-max: (max-width: calc(var(--breakpoint-2xl) - 1px));
+
+    /* Combined breakpoint utilities */
+    --mq-sm-only: (min-width: var(--breakpoint-sm)) and (max-width: calc(var(--breakpoint-md) - 1px));
+    --mq-md-only: (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px));
+    --mq-lg-only: (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-xl) - 1px));
+    --mq-xl-only: (min-width: var(--breakpoint-xl)) and (max-width: calc(var(--breakpoint-2xl) - 1px));
 
     /* =================================================================
        Z-INDEX SCALE