Resolve conflicts in next level cards

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

@@ -25,13 +25,21 @@ export default async function NextLevelBenefitsBlock({
       <CardGrid variant="twoColumnGrid">
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>
-            <Button type="button" disabled>
+            <div className={styles.cardInner}>
-              <Lock height={16} />
+              {/*TODO: These label buttons will be rebuilt as "Chip" (Badge?) components according to design.*/}
-              {formatMessage({ id: "Level up to unlock" })}
+              <Button
-            </Button>
+                type="button"
-            <div>
+                size="small"
-              <span className={styles.level}>As our {nextLevel}</span>{" "}
+                className={styles.chip}
-              <p className={styles.cardSubtitle}>{perk.explanation}</p>
+                disabled
+              >
+                <Lock height={16} />
+                Level up to unlock
+              </Button>
+              <div className={styles.mainContentContainer}>
+                <span className={styles.level}>As our {nextLevel}</span>{" "}
+                <p className={styles.cardSubtitle}>{perk.explanation}</p>
+              </div>
             </div>
           </article>
         ))}

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -21,23 +21,59 @@
   text-decoration: none;
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  flex: 1 0 0;
-  justify-content: center;
+  align-self: stretch;
-  align-items: center;
+  border-radius: var(--Corner-radius-Medium);
-  padding: 2rem;
+  background-color: var(--Scandic-Brand-Burgundy);
-  border-radius: 4px;
-  background-color: var(--some-grey-color, #e5e5e5);
   text-align: center;
 }
 
+.cardInner {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7);
+  gap: var(--x2, 16px);
+  align-self: stretch;
+}
+
+.mainContentContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--x1, 8px);
+  align-self: stretch;
+}
+
+/* TODO: Remove once we have the "Chip" (badge?) component. */
+.chip {
+  background-color: var(--Scandic-Red-90) !important;
+  color: var(--Scandic-Peach-50) !important;
+}
+
 .level {
+  text-align: center;
   font-family: var(--typography-Script-2-fontFamily);
-  font-size: var(--typography-Script-2-Desktop-fontSize);
+  font-size: 20px;
   font-weight: var(--typography-Script-2-fontWeight);
+  line-height: 110%;
+  letter-spacing: 0.4px;
+  color: var(--Scandic-Peach-50);
 }
 
 .cardSubtitle {
-  font-size: var(--typography-Subtitle-Mobile-fontSize, 18px);
+  color: var(--Scandic-Brand-Pale-Peach);
+  font-family: var(--typography-Title-5-fontFamily);
+  font-size: var(--typography-Title-5-Mobile-fontSize);
+  font-weight: 500;
+  line-height: var(--typography-Title-5-lineHeight);
+  /* TODO: I presume the actual text-transform value should be: var(--typography-Title-5-textCase); 
+   * - verify why we return "upper" and not uppercase.
+   * */
+  text-transform: uppercase;
+  text-wrap: balance;
 }
 
 .buttonContainer {
@@ -50,7 +86,12 @@
     grid-template-columns: 1fr 1fr 1fr;
   }
 
+  .level {
+    font-size: var(--typography-Script-2-Desktop-fontSize);
+    letter-spacing: 0.48px;
+  }
+
   .cardSubtitle {
-    font-size: var(--typography-Subtitle-Desktop-fontSize, 18px);
+    font-size: var(--typography-Title-5-fontSize);
   }
 }