feat:sw-561 updated design

app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -1,5 +1,4 @@
 .layout {
-  background-color: var(--Base-Background-Primary-Normal);
   display: grid;
   font-family: var(--typography-Body-Regular-fontFamily);
   gap: var(--Spacing-x3);
@@ -9,6 +8,10 @@
   margin: 0 auto;
 }
 
+.container {
+  background-color: var(--Base-Background-Primary-Normal);
+}
+
 .content {
   display: grid;
   padding-bottom: var(--Spacing-x9);

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -9,12 +9,14 @@ export default async function MyPagesLayout({
   breadcrumbs: React.ReactNode
 }>) {
   return (
-    <section className={styles.layout}>
+    <div className={styles.container}>
-      {breadcrumbs}
+      <section className={styles.layout}>
-      <section className={styles.content}>
+        {breadcrumbs}
-        <Sidebar />
+        <section className={styles.content}>
-        {children}
+          <Sidebar />
+          {children}
+        </section>
       </section>
-    </section>
+    </div>
   )
 }

app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css

@@ -1,5 +1,4 @@
 .layout {
-  background-color: var(--Base-Background-Primary-Normal);
   display: grid;
   font-family: var(--typography-Body-Regular-fontFamily);
   gap: var(--Spacing-x3);
@@ -8,3 +7,7 @@
   margin: 0 auto;
   max-width: var(--max-width);
 }
+
+.container {
+  background-color: var(--Base-Background-Primary-Normal);
+}

app/[lang]/(live)/(public)/[contentType]/[uid]/layout.tsx

@@ -16,9 +16,11 @@ export default function ContentTypeLayout({
   }
 >) {
   return (
-    <section className={styles.layout}>
+    <div className={styles.container}>
-      {breadcrumbs}
+      <section className={styles.layout}>
-      {children}
+        {breadcrumbs}
-    </section>
+        {children}
+      </section>
+    </div>
   )
 }

app/[lang]/(live)/(public)/hotelreservation/layout.module.css

@@ -1,6 +1,4 @@
 .layout {
   min-height: 100dvh;
   background-color: var(--Base-Background-Primary-Normal);
-  max-width: var(--max-width);
-  margin: 0 auto;
 }

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css

@@ -5,6 +5,8 @@
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
   flex-direction: column;
+  max-width: var(--max-width);
+  margin: 0 auto;
 }
 
 .section {

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.module.css

@@ -7,9 +7,8 @@
 }
 
 .content {
-  max-width: 1434px;
+  max-width: var(--max-width);
-  margin-left: auto;
+  margin: 0 auto;
-  margin-right: auto;
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x7);