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