main {
  @include mark-unstyled-children;
  padding: 1rem;

  // most pages use a one-column layout
  &:not(.two-columns) {
    @include stack(1rem);
  }

  // front page uses a one-column layout as well on narrow screens
  @media(max-width: 119.99999ch) {
    &.two-columns {
      @include stack(1rem);
    }
  }

  // two-column layout for the front page
  @media(min-width: 120ch) {
    &.two-columns {
      @include is-styled;
      border: 0;
      display: flex;
      flex-flow: row wrap;

      & > * {
        @include is-styled;
        border: 0;
        flex: 1;
        max-width: 60ch;
      }

      & > * + * {
        margin-left: 2rem;
      }
    }
  }

  & > section {
    @include stack(1rem);
  }
}