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

components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css

@@ -1,4 +1,4 @@
 .section {
   display: grid;
-  gap: 2.4rem;
+  gap: var(--Spacing-x2);
 }

components/Loyalty/Blocks/CardsGrid/index.tsx

@@ -1,6 +1,6 @@
 import Header from "@/components/MyPages/Blocks/Header"
 import Card from "@/components/TempDesignSystem/Card"
-import CardGrid from "@/components/TempDesignSystem/CardGrid"
+import Grids from "@/components/TempDesignSystem/Grids"
 
 import styles from "./cardsGrid.module.css"
 
@@ -10,7 +10,7 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
   return (
     <section className={styles.section}>
       <Header title={cards_grid.title} subtitle={cards_grid.preamble} />
-      <CardGrid variant={cards_grid.layout}>
+      <Grids.Stackable>
         {cards_grid.cards.map((card) => (
           <Card
             theme={cards_grid.theme || "one"}
@@ -22,7 +22,7 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
             primaryButton={card.primaryButton}
           />
         ))}
-      </CardGrid>
+      </Grids.Stackable>
     </section>
   )
 }