feat(WEB-304): remaning UI from design system primitives

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

@@ -1,86 +1,69 @@
 .container {
   display: grid;
-  gap: 2.4rem;
-}
-
-.buttonContainer {
-  display: flex;
-  justify-content: center;
+  gap: var(--Spacing-x3);
 }
 
 .cardContainer {
-  display: flex;
-  gap: 0.8rem;
+  display: grid;
+  gap: var(--Spacing-x2);
+  margin-right: calc(0px - var(--Spacing-x2));
   overflow-x: auto;
-  padding-right: 1.6rem;
-  margin-right: -1.6rem;
+  padding-right: var(--Spacing-x2);
   /* Hide scrollbar IE and Edge */
   -ms-overflow-style: none;
   /* Hide Scrollbar Firefox */
   scrollbar-width: none;
 }
 
+.link {
+  justify-self: center;
+}
+
 .card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 37rem;
-  min-width: 32rem;
-  padding: 4rem 1rem;
+  align-content: flex-start;
   background-color: var(--UI-Grey-10);
-  border-radius: 1.6rem;
-  gap: 1.8rem;
+  border-radius: var(--Corner-radius-xLarge);
+  display: grid;
+  gap: var(--Spacing-x2);
+  justify-content: center;
+  justify-items: center;
+  padding: var(--Spacing-x5) var(--Spacing-x1);
 }
 
 .tierHeading {
-  color: #b05b65;
+  color: var(--Scandic-Peach-70);
 }
 
-.qualifications {
-  margin: 0;
-  font-size: var(--typography-Body-Bold-fontSize);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  /* font-weight: var(--typography-Body-Bold-fontWeight);  -- Tokens not parsable*/
-  font-weight: 600;
+.textContainer {
+  align-content: flex-start;
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+  justify-content: center;
+  justify-items: center;
 }
 
-.benefits {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  margin: 0;
-  text-align: center;
-}
-
-.icon {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  position: relative;
-  top: 0.3rem;
-  height: 1.4rem;
+.checkIcon {
+  vertical-align: text-bottom;
 }
 
 @media screen and (min-width: 1367px) {
   .container {
-    gap: 3.2rem;
+    gap: var(--Spacing-x4);
   }
 
   .cardContainer {
     display: grid;
-    grid-template-columns: repeat(12, auto);
+    grid-template-columns: repeat(12, 1fr);
+    margin-right: 0;
     /* Three columns in the first row */
     padding-right: 0;
-    margin-right: 0rem;
   }
 
-  .card {
-    min-width: auto;
-  }
-
-  .card:nth-child(-n + 3) {
+  .card:nth-of-type(-n + 3) {
     grid-column: span 4;
   }
 
-  .card:nth-last-child(-n + 4) {
+  .card:nth-of-type(n + 4) {
     grid-column: span 3;
   }
 }