@mixin page() {
  display: block;
  margin: 0 auto;
  padding: 0 $container-padding-x;

  @media screen and (min-width: breakpoint('lg')) {
    padding-right: $spacing-md;
    padding-left: $spacing-md;

    &.page--narrow {
      max-width: 784px;
    }
  }

  .page__header {
    margin-bottom: $layout-sm;
    display: block;
  }

  .page__header__title {
    margin-bottom: 0;
    color: $primary;
  }

  .page__header__subtitle {
    margin-top: $spacing-sm;
    font-size: 14px;
    color: $dark-gray-3;
  }
}

.page {
  @include page();
  @include make-container();
  @include make-container-max-widths();
}

.page--fluid {
  @include page();
  @include make-container();
}