.container {
  display: grid;
  gap: var(--Spacing-x4);
  /* 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);
  grid-template-columns: 1fr auto;
}

.title {
  grid-column: 1/2;
  grid-row: 1/2;
}

.link {
  grid-column: 2/-1;
  grid-row: 1/2;
}

.subtitle {
  grid-column: 1/-1;
  grid-row: 2;
}

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