diff --git a/components/public-page-components.html b/components/public-page-components.html
index 6750862..810ad25 100644
--- a/components/public-page-components.html
+++ b/components/public-page-components.html
@@ -10,45 +10,47 @@
 
   <h1 class="sg-main-heading">Components – Public Page Components</h1>
 
-  <section id="component-content-group-box">
-    <p class="sg-preview-label">Component: Content Group Box</p>
+  <div class="sg-page-layout-public__content-mirror">
+    <section id="component-content-group-box">
+      <p class="sg-preview-label">Component: Content Group Box</p>
 
-    <div class="sg-preview-area">
-      <div class="sg-content-group-box" data-component="content-group-box"></div>
-    </div>
-  </section>
-
-  <section id="component-text-block">
-    <p class="sg-preview-label">Component: Public Page Content left</p>
-
-    <div class="sg-preview-area">
-      <div class="sg-text-block" data-component="text-block">
-        <p class="sg-body">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
-        </p>
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box"></div>
       </div>
-    </div>
-  </section>
+    </section>
 
-  <section id="component-call-to-action-card">
-    <p class="sg-preview-label">Component: Call to action Card</p>
+    <section id="component-text-block">
+      <p class="sg-preview-label">Component: Public Page Content left</p>
 
-    <div class="sg-preview-area">
-      <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card" data-component="call-to-action-card" aria-label="Call to action Card">
-        <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
-          <p class="sg-body sg-call-to-action-card__text">
-            Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
+      <div class="sg-preview-area">
+        <div class="sg-text-block" data-component="text-block">
+          <p class="sg-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
           </p>
-
-          <div class="sg-call-to-action-card__action">
-            <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
-              Call-to-action-Button
-            </button>
-          </div>
         </div>
-      </article>
-    </div>
-  </section>
+      </div>
+    </section>
+
+    <section id="component-call-to-action-card">
+      <p class="sg-preview-label">Component: Call to action Card</p>
+
+      <div class="sg-preview-area">
+        <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card" data-component="call-to-action-card" aria-label="Call to action Card">
+          <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
+            <p class="sg-body sg-call-to-action-card__text">
+              Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
+            </p>
+
+            <div class="sg-call-to-action-card__action">
+              <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
+                Call-to-action-Button
+              </button>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+  </div>
 
 </body>
 </html>
diff --git a/foundations.html b/foundations.html
index ec863ee..de1d158 100644
--- a/foundations.html
+++ b/foundations.html
@@ -157,7 +157,7 @@
         <tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
         <tr><td>content-card-margin-top-desktop</td><td>100px</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
         <tr><td>content-card-margin-top-mobile</td><td>1rem</td><td>Oberer Außenabstand der Content Card auf Mobile; entspricht spacing-large.</td></tr>
-        <tr><td>public-content-width</td><td>60vw</td><td>Standardbreite für wiederverwendbare Public-Content-Wrapper innerhalb der durch das jeweilige Page-Layout begrenzten Breite.</td></tr>
+        <tr><td>public-content-width</td><td>60%</td><td>Standardbreite für wiederverwendbare Public-Content-Wrapper innerhalb der durch das jeweilige Page-Layout begrenzten Breite.</td></tr>
         <tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
diff --git a/patterns/public-page-patterns.html b/patterns/public-page-patterns.html
index 92908e1..9d510ea 100644
--- a/patterns/public-page-patterns.html
+++ b/patterns/public-page-patterns.html
@@ -10,71 +10,73 @@
 
   <h1 class="sg-main-heading">Patterns – Public Page Patterns</h1>
 
-  <section id="public-page-patterns">
-    <p class="sg-preview-label">pattern: Public Page Content left</p>
+  <div class="sg-page-layout-public__content-mirror">
+    <section id="public-page-patterns">
+      <p class="sg-preview-label">pattern: Public Page Content left</p>
 
-    <div class="sg-preview-area">
-      <div class="sg-content-group-box" data-component="content-group-box">
-        <div class="sg-text-block" data-component="text-block">
-          <p class="sg-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
-          </p>
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <div class="sg-text-block" data-component="text-block">
+            <p class="sg-body">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
+            </p>
+          </div>
         </div>
       </div>
-    </div>
 
-    <p class="sg-preview-label">pattern: Public Page Content right</p>
+      <p class="sg-preview-label">pattern: Public Page Content right</p>
 
-    <div class="sg-preview-area">
-      <div class="sg-content-group-box" data-component="content-group-box">
-        <div class="sg-text-block sg-text-block--align-right" data-component="text-block">
-          <p class="sg-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
-          </p>
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <div class="sg-text-block sg-text-block--align-right" data-component="text-block">
+            <p class="sg-body">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
+            </p>
+          </div>
         </div>
       </div>
-    </div>
 
-    <p class="sg-preview-label">pattern: CTA box left</p>
+      <p class="sg-preview-label">pattern: CTA box left</p>
 
-    <div class="sg-preview-area">
-      <div class="sg-content-group-box" data-component="content-group-box">
-        <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card" data-component="call-to-action-card" aria-label="Call to action Card">
-          <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
-            <p class="sg-body sg-call-to-action-card__text">
-              Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
-            </p>
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card" data-component="call-to-action-card" aria-label="Call to action Card">
+            <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
+              <p class="sg-body sg-call-to-action-card__text">
+                Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
+              </p>
 
-            <div class="sg-call-to-action-card__action">
-              <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
-                Call-to-action-Button
-              </button>
+              <div class="sg-call-to-action-card__action">
+                <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
+                  Call-to-action-Button
+                </button>
+              </div>
             </div>
-          </div>
-        </article>
+          </article>
+        </div>
       </div>
-    </div>
 
-    <p class="sg-preview-label">pattern: CTA box right</p>
+      <p class="sg-preview-label">pattern: CTA box right</p>
 
-    <div class="sg-preview-area">
-      <div class="sg-content-group-box" data-component="content-group-box">
-        <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
-          <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
-            <p class="sg-body sg-call-to-action-card__text">
-              Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
-            </p>
+      <div class="sg-preview-area">
+        <div class="sg-content-group-box" data-component="content-group-box">
+          <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
+            <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
+              <p class="sg-body sg-call-to-action-card__text">
+                Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
+              </p>
 
-            <div class="sg-call-to-action-card__action">
-              <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
-                Call-to-action-Button
-              </button>
+              <div class="sg-call-to-action-card__action">
+                <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
+                  Call-to-action-Button
+                </button>
+              </div>
             </div>
-          </div>
-        </article>
+          </article>
+        </div>
       </div>
-    </div>
-  </section>
+    </section>
+  </div>
 
 </body>
 </html>
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index a2a6a53..8d43537 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -104,7 +104,7 @@
       <tbody>
         <tr><td>surface-text-block</td><td>color-transparent</td><td>Transparente Fläche des Textblocks.</td></tr>
         <tr><td>text-text-block</td><td>color-font-light</td><td>Standard-Textfarbe des Textblocks.</td></tr>
-        <tr><td>layout-text-block-width</td><td>dimension-public-content-width</td><td>Breite des Textblocks im Viewport.</td></tr>
+        <tr><td>layout-text-block-width</td><td>dimension-public-content-width</td><td>Breite des Textblocks im Page-Layout.</td></tr>
       </tbody>
     </table>
 
diff --git a/styles/01-foundations.css b/styles/01-foundations.css
index c4c3209..a80af5e 100644
--- a/styles/01-foundations.css
+++ b/styles/01-foundations.css
@@ -284,7 +284,7 @@
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;
   --dimension-search-field-width: 15.3rem;
-  --dimension-public-content-width: 60vw;
+  --dimension-public-content-width: 60%;
   --dimension-layer-pulldown-panel: 40;
   --dimension-multiselect-pulldown-panel-desktop-width: 500px;
   --dimension-options-row-mode-toggle-width: 7rem;