feat(WEB-304): remaning UI from design system primitives

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

@@ -1,45 +1,21 @@
 .container {
   display: grid;
-  gap: 1.5rem;
+  gap: var(--Spacing-x7);
+}
+
+.script {
+  transform: rotate(-2deg);
 }
 
 .card {
-  display: flex;
-  flex: 1 1 0px;
-  flex-direction: column;
   align-items: center;
+  background-color: var(--UI-Grey-10);
+  border-radius: var(--Corner-radius-Small);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
   justify-content: center;
-  gap: var(--Spacing-x2);
   padding: var(--Spacing-x7) var(--Spacing-x3);
   min-height: 280px;
-  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 {
-  display: flex;
-  flex-direction: column;
-  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;
+  padding: var(--Spacing-x3);
 }