refactor: break out Section container

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -2,7 +2,8 @@ import { Lock } from "react-feather"
 
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Grids from "@/components/TempDesignSystem/Grids"
@@ -23,7 +24,7 @@ export default async function NextLevelBenefitsBlock({
   const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
   const { formatMessage } = await getIntl()
   return (
-    <section className={styles.container}>
+    <SectionContainer>
       <Header title={title} subtitle={subtitle} link={link} />
       <Grids.Stackable>
         {perks.map((perk) => (
@@ -53,6 +54,6 @@ export default async function NextLevelBenefitsBlock({
           {formatMessage({ id: "Explore all levels and benefits" })}
         </Link>
       </Button>
-    </section>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -1,8 +1,3 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x7);
-}
-
 .card {
   align-items: center;
   background-color: var(--Scandic-Brand-Burgundy);
@@ -20,4 +15,4 @@
 
 .link {
   justify-self: center;
-}
+}