chore: rename perk to benefit

components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -104,7 +104,7 @@
   margin: 0;
 }
 
-.perkCard {
+.benefitCard {
   background-color: var(--Main-Grey-White);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: 0.4rem;
@@ -130,21 +130,21 @@
   list-style: none;
 }
 
-.perkCardHeader {
+.benefitCardHeader {
   display: grid;
   grid-template-columns: 1fr auto;
 }
 
-.perkCardDescription {
+.benefitCardDescription {
   line-height: 150%;
 }
 
-.perkInfo {
+.benefitInfo {
   border-bottom: 1px solid var(--Base-Border-Subtle);
   padding: 1.5rem 0;
 }
 
-.perkComparison {
+.benefitComparison {
   display: grid;
   grid-template-columns: 1fr 1fr;
 }
@@ -156,14 +156,14 @@
   padding: 1rem;
 }
 
-.perkValueContainer {
+.benefitValueContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
 }
 
-.perkValue {
+.benefitValue {
   background-color: var(--Main-Brand-Burgundy);
   border-radius: 0.8rem;
   color: var(--Base-Surface-Primary-Hover-alt, #fff);
@@ -171,7 +171,7 @@
   padding: 0.4rem 0.8rem;
 }
 
-.perkValueDetails {
+.benefitValueDetails {
   font-size: var(--typography-Footnote-Regular-fontSize);
   text-align: center;
 }