fix(SW-190): fixed some styling irregularities

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} />