.header-image
  position: relative
  width: 100%
  img
    width: 100%

  figcaption
    position: absolute
    left: -20px
    bottom: 50%
    font-size: 2.4rem
    font-weight: semi-bold()
    color: white
    line-height: 1
    margin-left: column(1, 12)
    span
      display: inline-block
      background: linear-gradient(90deg, $blackGradient)
      padding: 12px 20px
      margin-bottom: 2px

    //+respond-to-width(1200)
    //  bottom: 10%

    +respond-to-width(900)
      font-size: 1.8rem
    +respond-to-width(600)
      font-size: 1.3rem
    +respond-to-width(400)
      position: relative
      font-size: 1rem
      left: 0
      bottom: 0
      width: 100%
      margin-left: 0
      span
        margin-bottom: 0
        width: 100%

  .show-scroll
    position: absolute
    left: calc(50% - 55px)
    bottom: 0
    +flex(center, center)
    width: 110px
    height: 55px
    cursor: pointer

    .arrow
      position: relative
      top: 5px
      z-index: 2
      display: inline-block
      width: 8px

      transform: translate3d(0,0,0)
      transition: transform 0.3s

      svg
        width: 100%

    &:after
      position: absolute
      left: 0
      bottom: 0
      content: ''
      width: 0
      height: 0
      border-style: solid
      border-width: 0 55px 55px 55px
      border-color: transparent transparent $lightGray transparent

    &:hover
      .arrow
        transform: translate3d(0,3px,0)

    +respond-to-width(900)
      width: 90px
      height: 45px
      left: calc(50% - 45px)
      &:after
        border-width: 0 45px 45px 45px

    +respond-to-width(400)
      display: none