fix: resolve conflicts in current level cards

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

@@ -3,36 +3,41 @@
   gap: 1.5rem;
 }
 
-.value {
-  color: var(--Theme-Primary-Light-On-Surface-Text);
-}
-
-.cardContainer {
-  display: flex;
-  gap: 16px;
-}
-
-.cardSubtitle {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 14.4px;
-  text-align: center;
-  color: var(--Theme-Primary-Light-On-Surface-Accent);
-  margin: 0;
-}
-
 .card {
-  align-items: center;
-  background-color: var(--UI-Grey-10);
-  border-radius: 4px;
-  color: var(--Theme-Primary-Light-On-Surface-Text);
   display: flex;
   flex: 1 1 0px;
   flex-direction: column;
-  gap: 10px;
+  align-items: center;
   justify-content: center;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x7) var(--Spacing-x3);
   min-height: 280px;
-  padding: 30px;
+  background-color: var(--Scandic-Beige-00);
+  border-radius: var(--Corner-radius-Medium);
+  border: 1px solid var(--Scandic-Beige-20);
+  text-decoration: none;
   text-align: center;
+  color: var(--Theme-Primary-Light-On-Surface-Text);
+}
+
+.title {
+  text-wrap: balance;
+}
+.titleValue {
+  color: var(--UI-Red-60);
+}
+
+.titleExplanation {
+  color: var(--Theme-Primary-Light-On-Surface-Text);
+}
+
+.subtitle {
+  color: var(--Theme-Primary-Light-On-Surface-Text);
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: 0.096px;
+  text-align: center;
+  margin: 0;
 }

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>