feat: update loyalty overview table ui

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

@@ -1,9 +1,5 @@
 .benefitCard {
-  background-color: var(--Scandic-Opacity-White-100);
-  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-Small);
-  color: var(--Main-Brand-Burgundy);
-  padding: 0 var(--Spacing-x2);
+  padding-bottom: var(--Spacing-x-one-and-half);
   z-index: 2;
   grid-column: 1/3;
 }
@@ -16,11 +12,11 @@
 .benefitCardDescription {
   font-size: var(--typography-Caption-Regular-fontSize);
   line-height: 150%;
+  padding-right: var(--Spacing-x4);
 }
 
 .benefitInfo {
-  border-bottom: 1px solid var(--Base-Border-Subtle);
-  padding: var(--Spacing-x-one-and-half) 0;
+  padding-bottom: var(--Spacing-x-one-and-half);
 }
 
 .benefitComparison {
@@ -32,7 +28,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: var(--Spacing-x-one-and-half);
+  padding-top: var(--Spacing-x-one-and-half);
 }
 
 .details[open] .chevron {
@@ -42,6 +38,7 @@
 .chevron {
   display: flex;
   align-items: center;
+  color: var(--UI-Grey-80);
 }
 
 .summary::-webkit-details-marker {