fix: resolve conflicts in current level cards

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

@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
 import Header from "@/components/MyPages/Blocks/Header"
 import CardGrid from "@/components/TempDesignSystem/CardGrid"
 import Link from "@/components/TempDesignSystem/Link"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import levelsData from "../data"
@@ -44,10 +45,14 @@ export default async function CurrentBenefitsBlock({
             className={styles.card}
           >
             <Title as="h5" level="h3" className={styles.title}>
-              <span className={styles.value}>{benefit.value}</span>
-              {benefit.explaination ? ` ${benefit.explaination}` : ""}
+              <span className={styles.titleValue}>{benefit.value}</span>
+              <span className={styles.titleExplanation}>
+                {benefit.explaination ? ` ${benefit.explaination}` : ""}
+              </span>
             </Title>
-            <p className={styles.cardSubtitle}>{benefit.description}</p>
+            <Subtitle className={styles.subtitle}>
+              {benefit.description}
+            </Subtitle>
           </Link>
         ))}
       </CardGrid>