refactor: break out Section container

components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css

@@ -1,8 +1,3 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x7);
-}
-
 .script {
   transform: rotate(-2deg);
 }
@@ -18,4 +13,4 @@
   justify-content: center;
   min-height: 280px;
   padding: var(--Spacing-x7) var(--Spacing-x3);
-}
+}

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

@@ -1,7 +1,8 @@
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -45,7 +46,7 @@ export default async function CurrentBenefitsBlock({
   }
 
   return (
-    <section className={styles.container}>
+    <SectionContainer>
       <Header title={title} link={link} subtitle={subtitle} />
       <Grids.Scrollable>
         {currentLevel.benefits.map((benefit, idx) => (
@@ -63,6 +64,6 @@ export default async function CurrentBenefitsBlock({
           </Link>
         ))}
       </Grids.Scrollable>
-    </section>
+    </SectionContainer>
   )
 }