feat: add rendering of detailed benefits

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

@@ -48,7 +48,7 @@
 .select {
   appearance: none;
   border: 1px solid var(--Base-Input-Controls-Border-Normal, #b8a79a);
-  border-radius: 8px;
+  border-radius: 0.8rem;
   padding: 1.6rem;
   width: 100%;
 }
@@ -80,7 +80,7 @@
   left: 50%;
   right: 0;
   z-index: 1;
-  border-top-left-radius: 8px;
+  border-top-left-radius: 0.8rem;
 }
 
 .levelSummary {
@@ -92,9 +92,9 @@
 
 .levelRequirements {
   background-color: var(--Main-Brand-Burgundy);
-  border-radius: 8px;
+  border-radius: 0.8rem;
   color: #f7e1d5;
-  padding: 4px 8px;
+  padding: 0.4rem 0.8rem;
 }
 
 .levelSummaryText {
@@ -155,3 +155,23 @@
   align-items: center;
   padding: 1rem;
 }
+
+.perkValueContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.perkValue {
+  background-color: var(--Main-Brand-Burgundy);
+  border-radius: 0.8rem;
+  color: var(--Base-Surface-Primary-Hover-alt, #fff);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  padding: 0.4rem 0.8rem;
+}
+
+.perkValueDetails {
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  text-align: center;
+}