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