fix: add table styling

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css

@@ -8,26 +8,6 @@
   grid-column: 1/3;
 }
 
-.benefitValueContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.benefitValue {
-  background-color: var(--Main-Brand-Burgundy);
-  border-radius: var(--Corner-radius-Medium);
-  color: var(--Base-Surface-Primary-Hover-alt, #fff);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
-}
-
-.benefitValueDetails {
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  text-align: center;
-}
-
 .benefitCardHeader {
   display: grid;
   grid-template-columns: 1fr auto;

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx

@@ -1,33 +1,12 @@
-import { ChevronDown, Minus } from "react-feather"
+import { ChevronDown } from "react-feather"
 
-import CheckCircle from "@/components/Icons/CheckCircle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
+import BenefitValue from "../BenefitValue"
+
 import styles from "./benefitCard.module.css"
 
-import {
-  BenefitCardProps,
-  BenefitValueProps,
-} from "@/types/components/loyalty/blocks"
-
-function BenefitValue({ benefit }: BenefitValueProps) {
-  if (!benefit.unlocked) {
-    return <Minus />
-  }
-  if (!benefit.value) {
-    return <CheckCircle height={32} width={32} />
-  }
-  return (
-    <div className={styles.benefitValueContainer}>
-      <span className={styles.benefitValue}>{benefit.value}</span>
-      {benefit.valueDetails && (
-        <span className={styles.benefitValueDetails}>
-          {benefit.valueDetails}
-        </span>
-      )}
-    </div>
-  )
-}
+import { BenefitCardProps } from "@/types/components/loyalty/blocks"
 
 export default function BenefitCard({
   comparedValues,