.header
  height 400px
  overflow hidden
  position relative
  width 100%
  transform translateZ(0)

  @media screen and (max-width: 1030px)
    height 300px

.header__container
  background #3E7394
  background linear-gradient(120deg, rgba(#085078, 0.8) 10%, rgba(#85D8CE, 0.7) 90%)
  display table
  height 100%
  text-align center
  vertical-align middle
  width 100%

.header__headline
  display table-cell
  padding 0 1em
  vertical-align middle

.header__logo
  background url('../images/logo.png')
  background-size contain
  display inline-block
  height 180px
  margin-right 2em
  vertical-align middle
  width 180px

  @media screen and (max-width: 1030px)
    height 120px
    margin-right 1.5em
    width 120px

  @media screen and (max-width: 810px)
    height 80px
    margin 0 0 1.5em
    width 80px

.header__title
  color #fff
  display inline-block
  font-size 3em
  letter-spacing -1px
  line-height 1.1
  margin auto
  max-width 780px
  text-align left
  text-shadow 0 2px 0 rgba(#000, 0.1)
  vertical-align middle

  @media screen and (max-width: 1030px)
    font-size 2em
    max-width 640px

  @media screen and (max-width: 810px)
    display block
    font-size 1.6em
    max-width 440px
    text-align center

  @media screen and (max-width: 410px)
    font-size 1.4em

  a
    color inherit
    text-decoration underline

.header__video-bg
  height 100%
  position absolute
  bottom 0
  z-index -2

  @media (min-aspect-ratio: 1/2)
    width 100%
    height auto
