Sync styleguide 2026.05.18.1

docs/styleguide/styles/31-patterns-text-layouts.css

@@ -2,20 +2,21 @@
 /* Patterns: Text Layouts                                    */
 /* ========================================================= */
 
+.sg-page-text-layouts {
+  background: var(--surface-form-preview);
+}
+
+.sg-page-text-layouts .sg-main-heading,
+.sg-page-text-layouts .sg-preview-label {
+  color: inherit;
+}
+
 .sg-text-layout-pattern {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-small);
 }
 
-.sg-text-layout-pattern__preview-surface {
-  width: 100%;
-  box-sizing: border-box;
-  padding: var(--spacing-large);
-  border-radius: var(--radius-card);
-  background: var(--surface-text-layout-preview);
-}
-
 .sg-text-layout-pattern__sample {
   margin: 0;
 }
@@ -40,6 +41,11 @@
   column-gap: var(--layout-text-layout-column-gap);
 }
 
+.sg-text-layout-pattern__two-column--stacked-mobile {
+  width: 100%;
+  min-width: 0;
+}
+
 .sg-text-layout-pattern__three-column-distributed {
   width: 100%;
   min-width: 0;
@@ -73,7 +79,13 @@
   .sg-text-layout-pattern__sample--sixty-width,
   .sg-text-layout-pattern__sample--two-column,
   .sg-text-layout-pattern__two-column,
+  .sg-text-layout-pattern__two-column--stacked-mobile,
   .sg-text-layout-pattern__three-column-distributed {
     width: 100%;
   }
+
+  .sg-text-layout-pattern__two-column--stacked-mobile {
+    grid-template-columns: 1fr;
+    row-gap: var(--layout-text-layout-column-gap);
+  }
 }