.container {
  /* These negative margins are needed for horizontally scrollable lists of cards */
  margin-right: calc(0px - var(--Spacing-x2));
  overflow-x: hidden;
  padding-right: var(--Spacing-x2);
}

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

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

@media screen and (min-width: 950px) {
  .container {
    margin-right: var(--Spacing-x0);
    margin-left: var(--Spacing-x0);
  }
}