fix: align styles with wireframes

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -32,6 +32,10 @@
   gap: 1.8rem;
 }
 
+.tierHeading {
+  color: #b05b65;
+}
+
 .qualifications {
   margin: 0;
   font-size: var(--typography-Body-Bold-fontSize);

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

@@ -12,6 +12,8 @@
 .title {
   grid-area: title;
   font-weight: 600;
+  color: var(--some-black-color, #111);
+  text-align: center;
 }
 
 .link {
@@ -22,24 +24,25 @@
   font-size: 2rem;
 }
 .value {
-  color: var(--some-red-color, #ed2027);
+  color: var(--some-brown-color, #4d001b);
 }
 
 .cardContainer {
-  display: grid;
-  gap: 4px;
+  display: flex;
+  gap: 16px;
 }
 .cardSubtitle {
   font-family: var(--ff-fira-sans);
-  font-size: 12px;
+  font-size: 16px;
   font-weight: 400;
   line-height: 14.4px;
   text-align: center;
-  color: var(--some-black-color, #111);
+  color: #b05b65;
   margin: 0;
 }
 
 .card {
+  flex: 1 1 0px;
   text-decoration: none;
   display: flex;
   flex-direction: column;
@@ -48,30 +51,18 @@
   align-items: center;
   padding: 30px;
   border-radius: 4px;
-}
+  background-color: var(--Base-Fill-Normal);
 
-.card:first-of-type {
-  min-height: 280px;
-  background-color: var(--some-grey-color, #ababab);
-}
-
-.card:nth-child(2) {
-  background-color: var(--some-grey-color, #ececec);
-}
-
-.card:last-of-type {
-  background-color: var(--some-grey-color, #d4d2d2);
+  aspect-ratio: 1/1;
 }
 
 @media screen and (min-width: 950px) {
-  .cardContainer {
-    grid-template-areas:
-      "card card2"
-      "card card3";
+  .card:nth-child(2) {
+    grid-area: card2;
   }
 
-  .card:first-of-type {
-    grid-area: card;
+  .card:last-of-type {
+    grid-area: card3;
   }
 
   .card:nth-child(2) {