fix: adjust viewport styles

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

@@ -39,13 +39,21 @@
 .mobileColumns {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  /* gap: var(--Spacing-x2); */
+  display: none;
+  margin: 0 calc(var(--Spacing-x2) * -1);
+  position: relative;
+}
+
+.mobileColumns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   padding-top: var(--Spacing-x2);
   position: relative;
 }
 
 .columnHeaderContainer {
-  display: grid;
+  display: contents;
   grid-template-columns: 1fr 1fr;
   gap: var(--Spacing-x2);
   z-index: 2;
@@ -55,6 +63,27 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x2);
+  padding: var(--Spacing-x2);
+}
+
+.columnHeader:nth-child(1) {
+  padding-right: var(--Spacing-x1);
+}
+
+.columnHeader:nth-child(2) {
+  background-color: var(--Base-Background-Normal);
+  padding-left: var(--Spacing-x1);
+  border-top-left-radius: var(--Corner-radius-Medium);
+}
+
+.columnHeader:nth-child(2):has(+ .columnHeader) {
+  /* margin: 0; */
+  padding-left: var(--Spacing-x1);
+  padding-right: var(--Spacing-x1);
+}
+
+.columnHeader:nth-child(3) {
+  padding-left: var(--Spacing-x1);
 }
 
 .selectContainer {
@@ -143,6 +172,15 @@
   margin: 0;
 }
 
+.benefitCardWrapper {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column: 1/3;
+  padding: var(--Spacing-x2);
+  padding-top: 0;
+}
+
 .benefitCard {
   background-color: var(--Main-Grey-White);
   border: 1px solid var(--Base-Border-Subtle);
@@ -150,6 +188,7 @@
   color: var(--Main-Brand-Burgundy);
   padding: 0 var(--Spacing-x2);
   z-index: 2;
+  grid-column: 1/3;
 }
 
 .details[open] .chevron {
@@ -233,6 +272,7 @@
   .firstColumn {
     width: calc((100%) / 3);
     right: calc(100% / 3 * 2);
+    margin-left: 0;
   }
 
   .secondColumn {
@@ -250,8 +290,17 @@
   .columnHeaderContainer {
     grid-template-columns: 1fr 1fr 1fr;
   }
+  .columnHeader:nth-child(2) {
+    border-top-right-radius: var(--Corner-radius-Medium);
+  }
 
   .columns {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    margin: 0 calc(var(--Spacing-x2) * -1);
+  }
+
+  .benefitCardWrapper {
+    grid-column: 1/4;
   }
 }