
.pagetitle{
  // box-shadow: 10px 10px 0 0 $grey;
  position: relative;
  font-size: $larger-font;
  .pagetitle__wrapper--title &{
    border: 1px solid $border-color;
    @include crosshatchBg;
    margin-bottom: $spacing*2;
  }
  .pagetitle__wrapper--pagination &{
    border-top: 1px dashed $border-color;
    padding-top: $spacing;
    margin-bottom: $spacing;
  }
}

.pagetitle__inner{
  text-align: center;
  z-index: 10;
  position: relative;
  @include medium-large{
    @include flex-center;
    justify-content: space-between;
  }
  .pagetitle__wrapper--title &{
    padding: $spacing;
    background: $bg-color;
  }
}

.pagetitle__main{
  margin-bottom: 0;
  @include small{
    margin-bottom: $spacing/2;
  }
  @include small-medium{
    font-size: $large-font;
    line-height: 1.4;
  }
  @include large{
    font-size: $largest-font;
    flex-grow: 1;
  }
}

.pagination__link{
  display: block;
  @include secondary-font;
  white-space: nowrap;
  @include small{
    font-size: $small-font;
  }
  @include medium-large{
    font-size: $medium-font;
  }
}

.pagination__link__label{
  @include small{
    display: inline-block;
  }
  @include medium-large{
    .pagetitle__wrapper--title &{
      display: none;
    }
  }
}
.pagination__previous{
  @include small-medium{
    text-align: center;
    margin-bottom: $spacing/2;
  }
  @include large{
    text-align: left;
    margin-right: $spacing;
  }
}

.pagination__next{
  @include small-medium{
    text-align: center;
  }
  @include large{
    text-align: right;
    margin-left: $spacing;
  }
}