.container {
  margin-left: auto;
  margin-right: auto;

  /* 1920px  */
  max-width: 120rem;
  padding-right: var(--spacing-2);
  padding-left: var(--spacing-2);
}

.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap: var(--spacing-2);
}

.col-centred {
  grid-column: 1 / -1;
}

.container__inner {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .col-centred {
    grid-column: 2 / 8; /* 6 columns. */
  }

  .container__inner {
    grid-column: 2 / 8; /* 6 columns. */
  }
}

@media (min-width: 1200px) {
  .col-centred {
    grid-column: 3 / 7; /* 4 columns. */
  }
}

@media (min-width: 1440px) {
  .container {
    padding-right: var(--spacing-4);
    padding-left: var(--spacing-4);
  }

  .grid {
    grid-column-gap: var(--spacing-4);
  }
}