refactor: break out Section container

components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css

@@ -1,4 +0,0 @@
-.section {
-  display: grid;
-  gap: var(--Spacing-x2);
-}

components/Loyalty/Blocks/CardsGrid/index.tsx

@@ -1,14 +1,13 @@
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import Card from "@/components/TempDesignSystem/Card"
 import Grids from "@/components/TempDesignSystem/Grids"
 
-import styles from "./cardsGrid.module.css"
-
 import { CardsGridProps } from "@/types/components/loyalty/blocks"
 
 export default function CardsGrid({ cards_grid }: CardsGridProps) {
   return (
-    <section className={styles.section}>
+    <SectionContainer>
       <Header title={cards_grid.title} subtitle={cards_grid.preamble} />
       <Grids.Stackable>
         {cards_grid.cards.map((card) => (
@@ -23,6 +22,6 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
           />
         ))}
       </Grids.Stackable>
-    </section>
+    </SectionContainer>
   )
 }

components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css

@@ -1,6 +1,4 @@
 .container {
-  display: grid;
-  gap: var(--Spacing-x4);
   /* These negative margins are needed for horizontally scrollable lists of cards */
   margin-right: calc(0px - var(--Spacing-x2));
   overflow-x: hidden;

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -1,7 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 
 import HowItWorks from "./HowItWorks"
 import LoyaltyLevels from "./LoyaltyLevels"
@@ -46,7 +47,7 @@ export default function DynamicContent({
   )
 
   return (
-    <section className={styles.container}>
+    <SectionContainer className={styles.container}>
       {displayHeader ? (
         <Header
           link={dynamicContent.link}
@@ -56,6 +57,6 @@ export default function DynamicContent({
         />
       ) : null}
       <DynamicComponentBlock component={dynamicContent.component} />
-    </section>
+    </SectionContainer>
   )
 }