feat: design changes

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

@@ -9,37 +9,35 @@
 
 .card {
   align-items: center;
-  background-color: var(--UI-Grey-10);
-  border-radius: var(--Corner-radius-Small);
+  background-color: var(--Base-Background-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Medium);
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x1);
   justify-content: center;
-  padding: var(--Spacing-x7) var(--Spacing-x3);
   min-height: 280px;
-  padding: var(--Spacing-x3);
+  padding: var(--Spacing-x7) var(--Spacing-x3);
+  text-align: center;
 }
 
-.card {
-  align-items: center;
-  background-color: var(--Base-Background-Normal, #faf6f2);
-  border: 1px solid var(--Base-Border-Subtle, #e3d9d1);
-  border-radius: var(--Medium, 8px);
-  color: var(--Theme-Primary-Light-On-Surface-Text);
+.title {
   display: flex;
-  flex: 1 1 0px;
   flex-direction: column;
-  gap: 10px;
-  justify-content: center;
-  min-height: 280px;
-  padding: 30px;
-  text-align: center;
+  text-wrap: balance;
 }
 
 .scriptTitle {
   transform: rotate(-3deg);
 }
 
-.test {
-  height: 100px;
+.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;
 }