.page {
  background-color: $page-color--base;
  border: $border;
  flex: 1 1 100%;
  height: 750px;
  margin-bottom: 1vh;
  margin-top: 1vh;
  overflow-x: hidden;
  padding: $space--base $space--base $space--large;
  z-index: $z-index--base;

  @include breakpoint(medium_up) {
    flex: 1 1 50%;
    height: 820px;
    padding: $space--base;
    position: relative;
  }

  @include breakpoint(large_up) {
    height: 1000px;

    &:nth-child(even) {
      box-shadow: inset .3em 0 .3em transparentize($neutral-black, .9),
                  0.05em 0 0 transparentize($neutral-black, .8);
      padding: $space--base $space--x-large $space--large $space--large;
    }
    &:nth-child(odd) {
      box-shadow: inset -.3em 0 .3em transparentize($neutral-black, .9),
                  -0.05em 0 0 transparentize($neutral-black, .8);
      padding: $space--base $space--large $space--large $space--x-large;
    }
  }
}


.page--column {
  display: flex;
  flex-direction: column;

  &--center {
    @extend .page--column;
    justify-content: center;
  }
}

.page--full {
  border: $border;
  margin-bottom: 15vh;
  margin-top: 15vh;
  min-height: 70vh;
  padding: $space--base $space--small;

  @include breakpoint(medium_up) {
    padding: $space--base;
  }

  @include breakpoint(large_up) {
    padding: $space--large;
  }
}
