diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css index affa9a47e..347f06d0a 100644 --- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css +++ b/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); diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css index a4d66e4fa..5d0ec9909 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css +++ b/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) {