.houses-home-row
  margin-bottom: 125px

  .grid-row
    position: relative
    padding-bottom: 100px

    &:after
      content: ''
      position: absolute
      width: column(11, 24)
      height: 100%
      top: 0
      right: column(7, 24)
      background-color: $lightGray2
      opacity: 0.5

  .content
    position: relative
    vertical-align: top
    z-index: 2
    margin-left: column(1, 24)
    width: column(9, 24)
    padding-top: 60px

    .icon
      display: block
      width: 38px
      margin-bottom: 20px
      svg
        width: 100%
        opacity: 0.1


    h2
      color: $blue
      margin-bottom: 45px

    p
      font-size: 1.1rem
      color: $brown

      a
        color: $blue
        border-bottom: 1px solid $blue

      strong
        color: $blue
        +metropolisLight

    .button
      margin-top: 30px

  .image-side
    position: relative
    z-index: 2
    display: inline-block
    width: 50%
    margin-left: column(1, 24)

    .map-placeholder
      +flex(flex-start, center)
      width: calc(50% + 120px)
      height: 120px
      margin-left: auto
      text-decoration: none
      background-color: transparent
      transition: background 0.3s

      .icon
        +flex(center, center)
        height: 120px
        width: 120px
        background-color: $brown
        transition: background 0.3s

        span
          width: 32px
          height: 31px
          svg
            width: 100%

      p
        color: $brown
        +metropolisSemiBold
        text-transform: uppercase
        font-size: 0.75rem
        line-height: 1.2
        margin-left: 30px

      &:hover
        background-color: rgba($brown, 0.1)
        .icon
          background-color: darken($brown, 7.5%)

      +respond-to-width(400)
        height: 80px

        .icon
          width: 80px
          height: 80px


    .image-placeholder
      position: relative
      width: 100%
      height: 0
      padding-bottom: 66.67%

      +respond-to-width(1200)
        padding-bottom: 100%

      span
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        background-size: cover
        background-position: center right

        &.small
          display: none

        +respond-to-width(480)
          &.medium
            display: none

          &.small
            display: block


  +respond-to-width(900)
    margin-bottom: 0

    .grid-row
      &:after
        display: none

    .content
      width: column(11, 12)

      .button
        display: none

    .image-side
      width: column(11, 12)
      margin-top: 45px

      .map-placeholder
        width: 100%
        background-color: rgba($brown, 0.1)

      .image-placeholder
        padding-bottom: 66.67%