fix mobile responsive

src/components/sections/WingsInfrastructure.module.css

@@ -194,6 +194,36 @@
 }
 
 @media (max-width: 600px) {
+  /* var(--space-section) floors at a fixed 40px on any phone width (no
+     further breakpoint-based step-down), and .sectionShell's horizontal
+     padding otherwise stays fixed at 24px below 1024px — both read as
+     inconsistent with the rhythm every other Wings section settles into on
+     mobile. Normalized to match: 44px/44px vertical, and the shared
+     --dm-mobile-gutter (10px) horizontal.
+
+     .section's own margin-left/right also stays fixed at 24px below 1024px
+     (set at the top of this file, for the card's inset from the viewport
+     edge). Stacked with .sectionShell's padding that put the card's content
+     34px from the screen edge on phones — noticeably narrower than the
+     Footer's real 10px edge gutter (--dm-mobile-gutter, see globals.css's
+     .dm-section-container). Moving the full 10px gutter onto .section's
+     margin reproduces that same 10px screen-to-card edge, so the card sits
+     flush with its neighbors. .sectionShell then gets its own small 10px
+     breathing-room padding (independent of the outer gutter) so the eyebrow,
+     heading, icons, card titles/descriptions, and dividers (which span
+     .card's full width) aren't flush against the card's inner edge. */
+  .section {
+    padding-top: 44px;
+    padding-bottom: 44px;
+    margin-left: var(--dm-mobile-gutter, 10px);
+    margin-right: var(--dm-mobile-gutter, 10px);
+  }
+
+  .sectionShell {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
   .grid {
     display: flex;
     flex-direction: column;