Resolve conflicts in next level cards

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

@@ -21,23 +21,59 @@
   text-decoration: none;
   display: flex;
   flex-direction: column;
-  gap: 2rem;
-  justify-content: center;
-  align-items: center;
-  padding: 2rem;
-  border-radius: 4px;
-  background-color: var(--some-grey-color, #e5e5e5);
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: var(--Corner-radius-Medium);
+  background-color: var(--Scandic-Brand-Burgundy);
   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);
   }
 }