From fe2982a0d5ed36b23265b7d41e556484aa3f8484 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 21 May 2026 11:38:16 +0200
Subject: [PATCH] Fix VSF drawer text columns to exact left-right screenshot
 mapping

---
 patterns/vsf-card-listen-seite.html | 20 ++++++++++++--------
 styleguide.css                      | 16 ++++++++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/patterns/vsf-card-listen-seite.html b/patterns/vsf-card-listen-seite.html
index acb2f69..936bc15 100644
--- a/patterns/vsf-card-listen-seite.html
+++ b/patterns/vsf-card-listen-seite.html
@@ -688,14 +688,18 @@
           <h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
         </header>
         <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
-          <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--two-column sg-vsf-drawer-object-card__text" data-pattern-part="text-block-two-column">
-            Ticker: WDC
-            Region: Amerika
-            Sub-Region: Nordamerika
-            Land: Vereinigte Staaten von Amerika
-            ISIN: US9581021055
-            Industrie: Computer Hardware
-          </p>
+          <div class="sg-vsf-drawer-object-card__text-columns" data-pattern-part="text-block-two-column">
+            <p class="sg-body sg-vsf-drawer-object-card__text-column">
+              Ticker: WDC<br>
+              Region: Amerika<br>
+              Sub-Region: Nordamerika<br>
+              Land: Vereinigte Staaten von Amerika
+            </p>
+            <p class="sg-body sg-vsf-drawer-object-card__text-column">
+              ISIN: US9581021055<br>
+              Industrie: Computer Hardware
+            </p>
+          </div>
         </div>
       </article>
 
diff --git a/styleguide.css b/styleguide.css
index a2aa76f..8f1eceb 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2101,6 +2101,18 @@ section + section {
   column-gap: var(--layout-vsf-drawer-object-card-column-gap);
 }
 
+.sg-vsf-drawer-object-card__text-columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--layout-vsf-drawer-object-card-column-gap);
+  color: var(--text-vsf-drawer-object-card-body);
+}
+
+.sg-vsf-drawer-object-card__text-column {
+  margin: 0;
+  color: var(--text-vsf-drawer-object-card-body);
+}
+
 .sg-vsf-drawer-object-card__heading {
   color: var(--text-vsf-drawer-object-card-heading);
   margin: 0;
@@ -2142,6 +2154,10 @@ section + section {
 }
 
 @media (max-width: 767px) {
+  .sg-vsf-drawer-object-card__text-columns {
+    grid-template-columns: 1fr;
+  }
+
   .sg-text-layout-pattern__sample--sixty-width,
   .sg-text-layout-pattern__sample--two-column {
     width: 100%;