From 0fc383392c89fb0babff1e44c96cff18d3e2d6e4 Mon Sep 17 00:00:00 2001
From: Sonja Scheungrab <sonja.scheungrab@innoq.com>
Date: Thu, 1 Aug 2024 14:52:32 +0200
Subject: [PATCH] Add center class for reviews

---
 .../reviews-page/_reviews-page.scss           |  4 ++
 .../reviews-page/reviews-page.html            | 50 ++++++++-----------
 2 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/components/01-pages/service-pages/reviews-page/_reviews-page.scss b/components/01-pages/service-pages/reviews-page/_reviews-page.scss
index 82a1ad5ba..52f2b6bf0 100644
--- a/components/01-pages/service-pages/reviews-page/_reviews-page.scss
+++ b/components/01-pages/service-pages/reviews-page/_reviews-page.scss
@@ -17,6 +17,10 @@
   .longquote__zigzag {
     @include zigzag($brand-gray-10);
   }
+
+  .center-section {
+    text-align: center;
+  }
 }
 
 .button-wrapper {
diff --git a/components/01-pages/service-pages/reviews-page/reviews-page.html b/components/01-pages/service-pages/reviews-page/reviews-page.html
index 53a5a2efa..f149d60bd 100644
--- a/components/01-pages/service-pages/reviews-page/reviews-page.html
+++ b/components/01-pages/service-pages/reviews-page/reviews-page.html
@@ -85,7 +85,7 @@ <h2>Ergebnisbericht & Präsentation</h2>
         </div>
     </section>
     <section class="container-xl container-vertical-spacing-lg stripe stripe--white">
-        <div class="page-layout-md--default">
+        <div class="page-layout-md--default center-section">
             <h2>Was unser Review für Sie leistet</h2>
             <p>{{workshop_text}}</p>
         </div>
@@ -252,7 +252,7 @@ <h2>Auf den richtigen Ebenen ansetzen</h2>
         </div>
     </section>
     <section class="container-xl container-vertical-spacing-xl stripe stripe--gray">
-        <div class="page-layout-md--default">
+        <div class="page-layout-md--default center-section">
             <h2>Spannungsfelder im Blick haben</h2>
             <p>{{intro_text}}</p>
         </div>
@@ -328,7 +328,7 @@ <h3 class="text-grid__heading">Security & Datenschutz</h3>
         </div>
     </section>
     <section class="container-xl container-vertical-spacing-xl stripe stripe--gradient-2">
-        <div class="page-layout-md--default">
+        <div class="page-layout-md--default center-section">
             <h2>Ablauf eines Reviews</h2>
             <ul class="bulletfree-list bulletfree-list--center">
                 <li>Listitem 1 ist ein bisschen länger</li>
@@ -336,22 +336,22 @@ <h2>Ablauf eines Reviews</h2>
                 <li>Listitem 3</li>
             </ul>
         </div>
-        <div class="container-md">
-        <div class="icon-divider">
-            <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
-        </div>
-        <div class="label training">Abstimmen</div>
-        <h3>Kickoff mit Stakeholdern</h3>
-        <ul class="bulletfree-list bulletfree-list--center">
-            <li>Listitem 1 ist ein bisschen länger</li>
-            <li>Listitem 2 ist kurz</li>
-            <li>Listitem 3</li>
-        </ul>
-        <div class="tuple-list__label">Dauer: 1-2 Wochen</div>
-        <div class="icon-divider">
-            <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
-        </div>
-        <div class="label training">Verstehen</div>
+        <div class="container-md center-section">
+            <div class="icon-divider">
+                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
+            </div>
+            <div class="label training">Abstimmen</div>
+            <h3>Kickoff mit Stakeholdern</h3>
+            <ul class="bulletfree-list bulletfree-list--center">
+                <li>Listitem 1 ist ein bisschen länger</li>
+                <li>Listitem 2 ist kurz</li>
+                <li>Listitem 3</li>
+            </ul>
+            <div class="tuple-list__label">Dauer: 1-2 Wochen</div>
+            <div class="icon-divider">
+                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
+            </div>
+            <div class="label training">Verstehen</div>
         <h3>Interviews & Analysen</h3>
         <ul class="bulletfree-list bulletfree-list--center">
             <li>Listitem 1 ist ein bisschen länger</li>
@@ -364,21 +364,13 @@ <h3>Interviews & Analysen</h3>
         </div>
         <div class="label training">Darstellen, Bewerten, Empfehlen</div>
         <h3>Ergebnisbericht & Präsentation</h3>
-        <ul class="bulletfree-list">
-            <li>Listitem 1 ist ein bisschen länger</li>
-            <li>Listitem 2 ist kurz</li>
-            <li>Listitem 3</li>
-        </ul>        <div class="tuple-list__label">Dauer: 1-2 Wochen</div><div class="icon-divider">
-            <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
-        </div>
-        <div class="label training">Abstimmen</div>
-        <h3>Kickoff mit Stakeholdern</h3>
         <ul class="bulletfree-list bulletfree-list--center">
             <li>Listitem 1 ist ein bisschen länger</li>
             <li>Listitem 2 ist kurz</li>
             <li>Listitem 3</li>
-        </ul>
+        </ul>        
         <div class="tuple-list__label">Dauer: 1-2 Wochen</div>
+
         <div class="color-container">
             <p>Der Ablauf ist bei längeren Reviews grundsätzlich der gleiche. Interviews und Analysen benötigen bei größeren Reviews
             allerdings deutlich mehr Zeit, die Abstimmungsphase und die Erstellung des Ergebnisberichts dauern dagegen nur