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>
-              <Lock height={16} />
-              {formatMessage({ id: "Level up to unlock" })}
-            </Button>
-            <div>
-              <span className={styles.level}>As our {nextLevel}</span>{" "}
-              <p className={styles.cardSubtitle}>{perk.explanation}</p>
+            <div className={styles.cardInner}>
+              {/*TODO: These label buttons will be rebuilt as "Chip" (Badge?) components according to design.*/}
+              <Button
+                type="button"
+                size="small"
+                className={styles.chip}
+                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>
         ))}