.container {
  /* These negative margins are needed for getting the right background color for mobile loyalty table overview */
  margin: 0 calc(0px - var(--Spacing-x2)) calc(0px - var(--Spacing-x9))
    calc(0px - var(--Spacing-x2));
  overflow-x: hidden;
  padding: 0 var(--Spacing-x2) var(--Spacing-x9) var(--Spacing-x2);
}

.header {
  display: grid;
  gap: var(--Spacing-x1);
  padding-bottom: var(--Spacing-x2);
}

.tableTitle {
  text-wrap: balance;
}

.preamble {
  color: var(--Base-Text-High-contrast);
  font-size: var(--typography-Body-Regular-fontSize);
  line-height: var(--typography-Body-Regular-lineHeight);
  margin: 0;
}

@media screen and (min-width: 950px) {
  .header {
    width: 800px;
  }
}