fix(SW-190): styling fixes

components/ContentType/ContentPage/ContentPage.tsx

@@ -9,9 +9,7 @@ import Intro from "./Intro"
 
 import styles from "./contentPage.module.css"
 
-import type { LangParams } from "@/types/params"
-
-export default async function ContentPage({ lang }: LangParams) {
+export default async function ContentPage() {
   const contentPageRes = await serverClient().contentstack.contentPage.get()
 
   if (!contentPageRes) {
@@ -23,7 +21,7 @@ export default async function ContentPage({ lang }: LangParams) {
 
   return (
     <>
-      <section>
+      <section className={styles.content}>
         <header className={styles.header}>
           <Intro>
             <Title as="h2">{contentPage.header.heading}</Title>

components/ContentType/ContentPage/Intro/index.tsx

@@ -6,17 +6,15 @@ import styles from "./intro.module.css"
 
 export default async function Intro({ children }: PropsWithChildren) {
   return (
-    <div className={styles.intro}>
-      <MaxWidth variant="content" tag="div">
-        <MaxWidth
-          className={styles.content}
-          variant="text"
-          align="left"
-          tag="div"
-        >
-          {children}
-        </MaxWidth>
+    <MaxWidth variant="content" tag="div">
+      <MaxWidth
+        className={styles.content}
+        variant="text"
+        align="left"
+        tag="div"
+      >
+        {children}
       </MaxWidth>
-    </div>
+    </MaxWidth>
   )
 }

components/ContentType/ContentPage/Intro/intro.module.css

@@ -1,8 +1,10 @@
-.intro {
-  padding: var(--Spacing-x4) var(--Spacing-x2);
-}
-
 .content {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x2);
+}
+
+@media (min-width: 768px) {
+  .content {
+    gap: var(--Spacing-x3);
+  }
 }

components/ContentType/ContentPage/contentPage.module.css

@@ -1,13 +1,12 @@
 .content {
+  position: relative;
   display: grid;
   padding-bottom: var(--Spacing-x9);
-  position: relative;
-  justify-content: center;
-  align-items: flex-start;
 }
 
 .header {
   background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x4) var(--Spacing-x2);
 }
 
 .hero {