$description-color: #fff
$description-text-shadow: rgba(0, 0, 0, .1)

%text
  color: $color-main-blue
  font-weight: 300
  margin: 0

.large-hero
  +e('description')
    +media-sm
      font-size: 1.875rem
    color: $description-color
    font-size: 1.1rem
    font-weight: 100
    margin: 2rem auto
    max-width: 30rem
    text-shadow: 2px 2px 0 $description-text-shadow

  +e('image')
    display: block

  +e('text-content')
    left: 0
    padding-top: 88px
    position: absolute
    text-align: center
    top: 50%
    transform: translateY(-50%)
    width: 100%
    +media-md
      padding-top: 60px

  +e('title')
    @extend %text
    +media-sm
      font-size: 4.8rem
    font-size: 2.4rem

  +e('subtitle')
    @extend %text
    +media-sm
      font-size: 2.9rem
    font-size: 1.5rem

  border-bottom: 10px solid $color-main-blue
  position: relative
