.page-wrapper {
  $self: &;

  @include border-radius($theme-page-border-radius);
  @include box-shadow($theme-page-box-shadow);

  padding-top: 0;
  padding-bottom: 0;

  @include media-breakpoint-down($theme-responsive-text-breakpoint) {
    padding-right: .75rem;
    padding-left: .75rem;
  }

  @include media-breakpoint-down(md) {
    padding-right: 16px;
    padding-left: 16px;
  }

  &__content-name {
    @include skin-typography($style: "header-1");
  }

  &__title {
    @include theme-apply-fonts(
      $font-family: $theme-page-title-font-family,
      $font-size-sm: $theme-page-title-font-size-sm,
      $font-size: $theme-page-title-font-size,
      $font-weight: $theme-page-title-font-weight,
      $line-height-sm: $theme-page-title-line-height-sm,
      $line-height: $theme-page-title-line-height,
    );
    color: $theme-page-title-color;
  }

  &__deck {
    @include theme-apply-fonts(
      $font-family: $theme-page-deck-font-family,
      $font-size-sm: $theme-page-deck-font-size-sm,
      $font-size: $theme-page-deck-font-size,
      $font-weight: $theme-page-deck-font-weight,
      $line-height-sm: $theme-page-deck-line-height-sm,
      $line-height: $theme-page-deck-line-height,
    );
    color: $theme-page-deck-color;
  }

  &__description {
    @include theme-apply-fonts(
      $font-family: $theme-page-description-font-family,
      $font-size-sm: $theme-page-description-font-size-sm,
      $font-size: $theme-page-description-font-size,
      $font-weight: $theme-page-description-font-weight,
      $line-height-sm: $theme-page-description-line-height-sm,
      $line-height: $theme-page-description-line-height,
    );
    color: $theme-page-description-color;
  }

  &__website-section-name {
    margin-bottom: 20px;
    @include skin-typography($style: "section-header");
  }

  &__website-section-subhead {
    margin-bottom: 20px;
    @include skin-typography($style: "section-header-small");
  }

  &__website-section-description {
    font-size: 20px;
  }

  &__section {
    margin-bottom: 30px;
    @include media-breakpoint-up(md) {
      margin-bottom: 60px;
    }

    &--user-form {
      max-width: 1000px;
      margin-right: auto;
      margin-left: auto;
    }

    &--content-page-body {
      max-width: $skin-content-body-max-width;
      margin-right: auto;
      margin-left: auto;
    }

    &--break-container {
      margin-right: $marko-web-page-wrapper-padding * -1;
      margin-left: $marko-web-page-wrapper-padding * -1;
      background-color: $gray-100;
      @media (min-width: $marko-web-document-container-max-width) {
        $margin: calc((((100vw - $marko-web-document-container-max-width) / 2) + $marko-web-page-wrapper-padding) * -1);
        margin-right: $margin;
        margin-left: $margin;

        > * {
          max-width: $marko-web-document-container-max-width;
          margin-right: auto;
          margin-left: auto;
        }
      }
    }

    &--first-sm {
      margin-bottom: 30px;
    }

    &--first {
      margin-bottom: 40px;
    }

    &--content-header,
    &--nativex-story-header {
      margin-bottom: 20px;
      @include media-breakpoint-up(md) {
        margin-bottom: 30px;
      }
    }

    &--content-body {
      margin-bottom: 2rem;
    }

    &--nativex-story-header {
      padding-top: 30px;
    }

    &--no-spacer {
      margin-bottom: 0;
    }
  }

  &--no-padding-x {
    padding-right: 0;
    padding-left: 0;
  }

  .col > :last-child {
    margin-bottom: 0;
  }
}