feat: add two and three column grid variants

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

@@ -3,6 +3,7 @@ import Link from "next/link"
 import { Lang } from "@/constants/languages"
 import { serverClient } from "@/lib/trpc/server"
 
+import CardGrid from "@/components/TempDesignSystem/CardGrid"
 import Title from "@/components/Title"
 
 import levelsData from "../data"
@@ -53,8 +54,8 @@ export default async function CurrentBenefitsBlock({
       </header>
       {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
 
-      <div className={styles.cardContainer}>
-        {currentLevel.benefits.map((benefit, idx) => (
+      <CardGrid>
+      {currentLevel.benefits.map((benefit, idx) => (
           <Link
             href={benefit.href}
             key={`${currentLevel}-${idx}`}
@@ -67,7 +68,7 @@ export default async function CurrentBenefitsBlock({
             <p className={styles.cardSubtitle}>{benefit.description}</p>
           </Link>
         ))}
-      </div>
+      </CardGrid>
     </section>
   )
 }