From dfafe55e48a31fef400ec1dfbb6afb14f8cbdc3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 26 May 2026 11:45:55 +0200
Subject: [PATCH] Keep text layout 2/3-column patterns multi-column on mobile

---
 patterns/text-layouts.html          | 8 ++++----
 styles/31-patterns-text-layouts.css | 8 ++++++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/patterns/text-layouts.html b/patterns/text-layouts.html
index 74de2dc..93b45d4 100644
--- a/patterns/text-layouts.html
+++ b/patterns/text-layouts.html
@@ -28,8 +28,8 @@
       </div>
     </div>
 
-    <p class="sg-preview-label">Pattern: Text zweispaltig</p>
-    <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig">
+    <p class="sg-preview-label">Pattern: Text zweispaltig (mobil zweispaltig)</p>
+    <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
       <div class="sg-text-layout-pattern__preview-surface">
         <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
           <p class="sg-body sg-text-layout-pattern__column">
@@ -42,8 +42,8 @@
       </div>
     </div>
 
-    <p class="sg-preview-label">Pattern: Dreispaltig verteilt</p>
-    <div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt">
+    <p class="sg-preview-label">Pattern: Dreispaltig verteilt (mobil dreispaltig)</p>
+    <div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt mobil dreispaltig">
       <div class="sg-text-layout-pattern__preview-surface">
         <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed">
           <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
diff --git a/styles/31-patterns-text-layouts.css b/styles/31-patterns-text-layouts.css
index 0eee111..3504afe 100644
--- a/styles/31-patterns-text-layouts.css
+++ b/styles/31-patterns-text-layouts.css
@@ -78,6 +78,14 @@
     grid-template-columns: 1fr;
   }
 
+  .sg-text-layout-pattern__two-column[data-pattern-part="text-block-two-column"] {
+    grid-template-columns: var(--layout-text-layout-two-column-columns);
+  }
+
+  .sg-text-layout-pattern__three-column-distributed[data-pattern-part="text-block-three-column-distributed"] {
+    grid-template-columns: var(--layout-text-layout-three-column-columns);
+  }
+
   .sg-text-layout-pattern__three-column-distributed[data-pattern-part="company-card-metrics-three-column"] {
     grid-template-columns: var(--layout-text-layout-three-column-columns);
   }