$staff-intro-offset: -(ms(22));
$staff-header-bg-gray: #f6f6f6;

.staff-header {
  background-image: linear-gradient(
    to right,
    $staff-header-bg-color,
    $staff-header-bg-color 50%,
    $staff-header-bg-gray 50%
  );
}

.staff-header-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: $staff-header-content-bg-color;
}

.staff-header-image {
  width: 100%;
}

.staff-header-quote {
  background-color: $staff-header-quote-bg-color;
  padding: $spacer-lg $spacer-md;
}

.staff-header-quote--text {
  color: $staff-header-quote-color;
  font-size: $font-size-xl;
}

.staff-header-quote--author {
  @extend %heading-font-regular;

  text-transform: uppercase;
  color: $staff-header-quote-author-color;
  font-size: $font-size-base;
}

.staff-intro {
  background-color: $staff-header-intro-bg-color;
  padding: $spacer-md;
  width: 100%;
  color: $staff-header-intro-text-color;
}

.staff-intro--name {
  @extend %heading-font-heavy;

  margin-bottom: $spacer-xs;
  text-transform: uppercase;
  color: $staff-header-intro-text-color;
  font-size: $font-size-xl;
}

.staff-intro--job-title {
  @extend %body-font-italic;

  margin-bottom: $spacer-xs;
  color: $staff-header-intro-text-color;
  font-size: $font-size-lg;
}

.staff-intro--text {
  @extend %heading-font-regular;

  border-bottom: 1px solid $staff-header-intro-text-border;
  padding-bottom: $spacer-base;
  line-height: $paragraph-line-height;
  font-size: $font-size-sm;
}

.staff-intro--social {
  padding: $spacer-md 0;

  .icon {
    font-size: ms(7);
  }

  .icon-svg:hover,
  .icon-svg:focus {
    background: $staff-header-icon-hover-color;
  }
}

//Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
  .staff-header-image {
    margin: 0 auto;
    max-width: 70%;
  }
}

@media screen and (min-width: $grid-breakpoint-lg) {
  .staff-header-content {
    flex-direction: row;
    margin: 0 auto;
    max-width: $default-page-layout-content-width-xl;
  }

  .staff-header-quote {
    flex-grow: 1;
    padding: $spacer-xxl $spacer-md 0;
  }

  .staff-header-image {
    min-width: $default-page-layout-content-width-xl / 2;
    max-width: $default-page-layout-content-width-xl / 2;
    min-height: $default-page-layout-content-width-xl / 2;
    max-height: $default-page-layout-content-width-xl / 2;
  }

  .staff-header-quote--text {
    font-size: $font-size-xxxl;
  }

  .staff-intro {
    position: relative;
    top: $staff-intro-offset;
    margin: 0 auto $staff-intro-offset;
    padding: $spacer-lg $spacer-xl 0;
    width: $grid-page-layout-content-width;
    max-width: $grid-page-layout-content-width-xl;
    box-sizing: content-box;
  }

  .staff-intro--job-title {
    margin-bottom: $spacer-sm;
  }

  .staff-intro--text {
    padding-bottom: $spacer-lg;
    font-size: $font-size-lg;
  }

  .staff-intro--social {
    padding: $spacer-base 0;
  }
}