The footer

The footer is also relatively straight forward:

.site-footer {
  background-color: var(--background-dark);
  padding-block: 2rem;
  text-align: center;

  /* either use .grid-flow and change the --grid-flow-spacing, or do this */
  display: grid;
  gap: 2rem;

  a {
    text-decoration: none;
    color: var(--text-main);

    &:hover,
    &:focus-visible {
      color: var(--text-brand-light);
    }
  }
}

.site-footer__title {
  font-size: var(--font-size-md);
  font-family: var(--ff-heading);
  font-weight: 700;
}