fix: add table styling

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,