.page-header {
  position: relative;
  .background {
    width: 100%;
    height: 550px;
    background: $color-black;
    overflow: hidden;
    position: relative;
    img {
      display: block;
      width: 1920px;
      height: 800px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -960px;
      margin-top: -400px;
    }
  }
  .author {
    background: $color-cloud;
    text-align: center;
    padding: 0 20px 30px 20px;
    .head {
      display: inline-block;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      padding: 3px;
      background: #fff;
      box-shadow: 0 0 5px $color-concrete;
      position: relative;
      top: -68px;
      opacity: 0;
      transform: translateY(-20px);
      transition: all 0.4s;
      img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
      }
    }
    .name, .signature {
      position: relative;
      margin: 0;
      opacity: 0;
      transform: translateY(-20px);
      transition: all 0.4s;
    }
    .name {
      font-size: 1.3rem;
      color: $color-midnightBlue;
      top: -50px;
    }
    .signature {
      font-size: .95rem;
      color: $color-asbestos;
      top: -35px;
    }
  }
}
@media screen and (max-width: $screen-medium) {
  .page-header {
    .background {
      height: 450px;
    }
  }
}
@media screen and (max-width: $screen-small) {
  .page-header {
    .background {
      height: 350px;
      img {
        width: 1200px;
        height: 500px;
        margin-left: -600px;
        margin-top: -250px;
      }
    }
  }
}