// Custom header properties for the case header with image
header.main
  margin-bottom: 0
  padding: column(.5) column(.5) 0 column(.5)

  // Hide on smallest view for it has lost its value
  +respond-to-width($xsGridBreakpoint)
    display: none

  .scroll-hinter
    top: auto
    bottom: 0

  // Control min and max height
  .height-controller
    position: relative
    overflow: hidden
    max-height: 87vh
    min-height: 600px

    +respond-to-width($mdGridBreakpoint)
      max-height: none
      min-height: 0

  // Container to determine the ratio of the header
  .ratio-controller
    position: relative
    width: 100%
    height: 0
    padding-bottom: 56.25%

    +respond-to-width-beyond(1980)
      padding-bottom: 52%

    // Inner wrapper so we can add content inside
    .wrapper
      +position(absolute, 0 null null 0)
      width: 100%
      height: 100%

    // Background image
    img
      +position(absolute, 0 0 null null)
      width: 100%

  // Container hero layout
  .hero-text-layout
    position: relative
    z-index: 10
    height: 100%
    color: #fff

    // Flex box containing title and tag cloud
    .hero-text-flex-column
      display: flex
      flex-direction: column
      justify-content: space-between
      margin: 0 auto
      width: column(10,13)
      height: 45%

      +respond-to-width-beyond(1800)
        width: column(10)
      +respond-to-width-beyond(1980)
        width: column(14)
      +respond-to-width($mdGridBreakpoint)
        width: column(12,13)

    // Large title
    .title
      margin-top: column(1)
      font-size: 6rem
      font-weight: bold()
      line-height: 1

    // Arrow pointing down
    .arrow
      display: block
      width: 14px
      height: 32px

      +sprite(0 -20px)
      cursor: pointer

  // When max padding is reached
  +respond-to-width-beyond(1680)
    padding: 60px 60px 0

  +respond-to-width($mdGridBreakpoint)
    .hero-text-layout .title
      font-size: 4rem
      margin-bottom: 30px
  +respond-to-width($smGridBreakpoint)
    .hero-text-layout .title
      font-size: 3rem
  +respond-to-width($xsGridBreakpoint)
    .hero-text-layout .title
      font-size: 1rem