fix: update loyalty cards and join loyalty sidebar design

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

@@ -1,8 +1,3 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x3);
-}
-
 .cardContainer {
   display: grid;
   gap: var(--Spacing-x2);
@@ -20,37 +15,30 @@
 }
 
 .card {
-  align-content: flex-start;
-  background-color: var(--UI-Grey-10);
+  background-color: var(--Scandic-Brand-Pale-Peach);
   border-radius: var(--Corner-radius-xLarge);
   display: grid;
   gap: var(--Spacing-x2);
+  min-height: 280px;
   justify-content: center;
   justify-items: center;
   padding: var(--Spacing-x5) var(--Spacing-x1);
 }
 
-.levelHeading {
-  color: var(--Scandic-Peach-70);
-}
-
 .textContainer {
-  align-content: flex-start;
-  display: grid;
+  align-content: flex-end;
+  display: flex;
   gap: var(--Spacing-x-one-and-half);
+  width: 100%;
+  flex-wrap: wrap;
   justify-content: center;
-  justify-items: center;
 }
 
 .checkIcon {
-  vertical-align: text-bottom;
+  vertical-align: middle;
 }
 
 @media screen and (min-width: 1367px) {
-  .container {
-    gap: var(--Spacing-x4);
-  }
-
   .cardContainer {
     display: grid;
     grid-template-columns: repeat(12, 1fr);