fix: tweak css

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

@@ -1,14 +1,12 @@
 .container {
   background-color: var(--Main-Brand-PalePeach);
-  left: 50%;
   margin-top: calc(var(--Spacing-x2) * -1);
-  margin-left: -50vw;
-  margin-right: -50vw;
+  margin-left: calc(var(--Spacing-x2) * -1);
+  margin-right: calc(var(--Spacing-x2) * -1);
   margin-bottom: calc(
     (var(--Spacing-x2) + 7.7rem) * -1
   ); /* Based on the MaxWidth's 1.6rem + the LoyaltyPage's 7.7rem bottom margins */
   position: relative;
-  right: 50%;
   width: 100dvw;
   padding: var(--Spacing-x2);
   display: grid;
@@ -39,7 +37,6 @@
 .mobileColumns {
   display: flex;
   flex-direction: column;
-  /* gap: var(--Spacing-x2); */
   display: none;
   margin: 0 calc(var(--Spacing-x2) * -1);
   position: relative;
@@ -121,7 +118,6 @@
   bottom: 0;
   left: 0;
   right: 50%;
-  margin-left: calc(var(--Spacing-x2) * -1);
   z-index: 1;
 }
 
@@ -134,23 +130,10 @@
   margin-bottom: calc(var(--Spacing-x2) * -1);
   left: 50%;
   right: 0;
-  margin-right: calc(var(--Spacing-x2) * -1);
   z-index: 1;
   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;
@@ -256,15 +239,8 @@
 
 @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;
+    margin: 0 calc(var(--Spacing-x3) * -1);
   }
-
   .mobileColumns {
     display: none;
   }

components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css

@@ -1,6 +1,7 @@
 .container {
   display: grid;
   gap: 2.4rem;
+  /* These negative margins are needed for horizontally scrollable lists of cards */
   margin-right: -1.6rem;
   padding-right: 1.6rem;
 }
@@ -26,3 +27,10 @@
   margin: 0;
   grid-area: subtitle;
 }
+
+@media screen and (min-width: 950px) {
+  .container {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}