.house-header
  position: relative

  .background
    position: absolute
    width: 100%
    height: calc(100% - 200px)
    top: 100px
    left: 0
    background-color: $lightBlue

  .grid-row
    position: relative
    z-index: 1
    margin-top: -100px
    +flex(center, flex-start)

    .placeholder
      position: relative
      +flex(flex-start, flex-start)
      width: column(11, 12)
      background-color: $blueishGray

    .title-placeholder
      position: absolute
      z-index: 10
      top: 35px
      left: 0
      width: 100%
      text-align: center

      h1
        display: inline-block
        background: $blue
        padding: 12px 20px
        +phenomena
        font-size: 2rem
        line-height: 1.2
        color: white
        min-width: 400px

    .image-slider
      position: relative
      width: 60%

      .placeholder
        position: relative
        width: 100%
        padding-bottom: 65%
        height: 0
        cursor: move

        .controllers
          position: absolute
          z-index: 3
          width: 100%
          height: 100%

          .nav-item
            position: absolute
            +flex(center, center)
            bottom: -15px
            width: 30px
            height: 30px
            cursor: pointer

            &:after
              content: ''
              +arrowWhite
              transition: transform 0.3s

            &.previous
              background-color: $blue
              right: 90px
              &:after
                +translate3dRotate(0,0,0, 180deg)

              &:hover
                &:after
                  +translate3dRotate(-3px,0,0, 180deg)

            &.next
              background-color: $brown
              right: 60px
              &:after
                +translate3d(0,0,0)

              &:hover
                &:after
                  +translate3d(3px,0,0)



        figure
          position: absolute
          z-index: 1
          top: 0
          left: 0
          width: 100%
          height: 100%
          opacity: 0
          transition: opacity 0.4s

          span
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            background-color: white
            background-size: contain
            background-position: center
            background-repeat: no-repeat


            &.medium
              display: none

            +respond-to-width(540)
              &.medium
                display: block

              &.large
                display: none

          &:first-of-type
            span
              background-size: cover

          &.active
            z-index: 2
            opacity: 1

    .map
      position: absolute
      right: 0
      top: 0
      width: 40%
      height: 100%
      background-image: url("/img/180205-map.svg")
      background-size: contain
      background-position: center
      background-repeat: no-repeat
      svg
        display: block
        height: 100%
        width: auto
        margin: auto

        .houses-group
          opacity: 0

      $types: luxe-6 luxe-8 luxe-10 xluxe-6 xluxe-8 xluxe-10

      @each $type in $types
        &#{'#'+$type}
          svg
            #{'#'+$type}-group
              opacity: 1

    +respond-to-width(900)
      .placeholder
        display: block

      .title-placeholder
        position: relative
        top: 0
        z-index: 1
        h1
          display: block
          min-width: 0
          padding: 25px 20px

      .image-slider
        width: 100%
      .map
        position: relative
        width: 100%
        height: auto

        svg
          width: 100%
          max-width: 500px
          height: auto