fix(SW-190): fixed some styling irregularities

app/globals.css

@@ -98,6 +98,8 @@
 
 :root {
   --max-width: 113.5rem;
+  --max-width-content: 74.75rem;
+  --max-width-text-block: 49.5rem;
 }
 
 * {

components/ContentType/ContentPage/contentPage.module.css

@@ -1,6 +1,4 @@
-.content {
-  position: relative;
-  display: grid;
+.contentPage {
   padding-bottom: var(--Spacing-x9);
 }
 
@@ -9,8 +7,13 @@
   padding: var(--Spacing-x4) var(--Spacing-x2);
 }
 
-.hero {
-  display: grid;
-  justify-content: center;
+.content {
   padding: var(--Spacing-x4) var(--Spacing-x2);
+  display: grid;
+  justify-items: center;
+}
+
+.innerContent {
+  width: 100%;
+  max-width: var(--max-width-content);
 }

components/ContentType/ContentPage/index.tsx

@@ -20,7 +20,7 @@ export default async function ContentPage() {
 
   return (
     <>
-      <section className={styles.content}>
+      <section className={styles.contentPage}>
         <header className={styles.header}>
           <Intro>
             <Title as="h2">{contentPage.header.heading}</Title>
@@ -28,14 +28,16 @@ export default async function ContentPage() {
           </Intro>
         </header>
 
-        {heroImage ? (
-          <div className={styles.hero}>
-            <Hero
-              alt={heroImage.meta.alt || heroImage.meta.caption || ""}
-              src={heroImage.url}
-            />
+        <main className={styles.content}>
+          <div className={styles.innerContent}>
+            {heroImage ? (
+              <Hero
+                alt={heroImage.meta.alt || heroImage.meta.caption || ""}
+                src={heroImage.url}
+              />
+            ) : null}
           </div>
-        ) : null}
+        </main>
       </section>
 
       <TrackingSDK pageData={tracking} />

components/Hero/hero.module.css

@@ -1,7 +1,7 @@
 .hero {
   height: 400px;
   margin-bottom: var(--Spacing-x2);
-  max-width: 100%;
+  width: 100%;
   object-fit: cover;
   border-radius: var(--Corner-radius-xLarge);
   margin: 0;

components/Intro/intro.module.css

@@ -1,10 +1,11 @@
 .intro {
-  max-width: 74.75rem;
+  max-width: var(--max-width-content);
   margin: 0 auto;
 }
 
 .content {
   display: grid;
+  max-width: var(--max-width-text-block);
   gap: var(--Spacing-x2);
 }