feat: add markup for additional viewport sizes

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

@@ -32,6 +32,11 @@
 }
 
 .columns {
+  display: none;
+  position: relative;
+}
+
+.mobileColumns {
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x2);
@@ -80,7 +85,7 @@
   bottom: var(--Spacing-x2);
 }
 
-.leftColumn {
+.firstColumn {
   background-color: var(--Main-Brand-PalePeach);
   position: absolute;
   top: 0;
@@ -91,7 +96,7 @@
   z-index: 1;
 }
 
-.rightColumn {
+.secondColumn {
   background-color: var(--Base-Background-Normal);
   position: absolute;
   position: absolute;
@@ -105,6 +110,18 @@
   border-top-left-radius: var(--Corner-radius-Medium);
 }
 
+.thirdColumn {
+  width: calc(100% / 3);
+  background-color: var(--Main-Brand-PalePeach);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(100% / 3 * 2);
+  right: 0;
+  margin-left: calc(var(--Spacing-x2) * -1);
+  z-index: 1;
+}
+
 .levelSummary {
   display: flex;
   flex-direction: column;
@@ -197,3 +214,44 @@
   font-size: var(--typography-Footnote-Regular-fontSize);
   text-align: center;
 }
+
+@media screen and (min-width: 950px) {
+  .container {
+    left: auto;
+    right: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
+    width: auto;
+  }
+
+  .mobileColumns {
+    display: none;
+  }
+
+  .firstColumn {
+    width: calc((100%) / 3);
+    right: calc(100% / 3 * 2);
+  }
+
+  .secondColumn {
+    width: calc(100% / 3);
+    left: calc(100% / 3);
+    right: calc(100% / 3);
+  }
+
+  .thirdColumn {
+    width: calc(100% / 3);
+    left: calc(100% / 3 * 2);
+    right: 0;
+  }
+
+  .columnHeaderContainer {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .columns {
+    display: flex;
+  }
+}