.invest-reasons
  position: relative

  .grid-row
    position: relative
    padding-top: 60px

    &:after
      content: ''
      position: absolute
      z-index: 1
      left: column(2, 12)
      bottom: -60px
      width: column(11, 24)
      height: 75%
      background-color: $lightGray05


  .content
    position: relative
    z-index: 3
    width: column(11, 24)
    margin: 0 0 100px column(1, 24)
    padding-right: column(1, 12)
    overflow: visible

    &:before
      content: ''
      position: absolute
      left: 23px
      top: 0
      height: 100%
      width: 2px
      background-color: $brown05

    article
      position: relative
      margin-bottom: 25px
      padding-left: 65px

      span
        position: absolute
        left: 0
        width: 50px
        padding: 20px 0
        background-color: white
        +flex(center, center)

        svg
          width: 100%

          &#diamond
            .st0
              fill: $brown

          &#surrounding
            .st0
              fill: $brown

          &#location
            .st2
              fill: $brown
            .st0
              stroke: $brown

      &.location
        span
          padding-top: 0
          left: -2px
          top: -3px
          svg
            width: 48px

      &.rent-options
        span
          top: -15px
          svg
            width: 41px

      &.invest-steady
        span
          top: -31px
          left: 2px
          svg
            width: 45px

      h3
        +metropolisSemiBold
        font-size: 1.1rem
        line-height: 1.2
        color: $blue

      p
        +metropolisLight
        font-size: 0.9rem
        line-height: 1.6
        color: $blue
        margin-bottom: 0

    .button-row
      position: relative
      margin-bottom: 0
      bottom: -20px

      &:before
        position: absolute
        left: 17px
        bottom: 16px
        content: ''
        border-radius: 100%
        border: 2px solid $brown05
        background-color: white
        width: 11px
        height: 11px

      .button
        margin-left: 65px
        margin-top: 15px
        background-color: $blue
        color: white
        &:after
          +arrowWhite


  figure
    position: absolute
    z-index: 2
    right: 0
    top: 0
    height: 100%
    width: 50%

    background:
      image: url("/img/backgrounds/invest-image.jpg")
      size: contain
      repeat: no-repeat
      position: 70% 0%

    +respond-to-width(1500)
      background-image: url("/img/backgrounds/invest-image-vertical.jpg")


  +respond-to-width(840)
    .grid-row
      &:after
        left: auto
        right: 0
        width: 60%
        +respond-to-width(500)
          display: none


    .content
      width: column(11, 12)
      padding-right: 0

    figure
      position: relative
      width: column(10, 12)
      margin: auto
      height: 0
      padding-bottom: 65%
      background-image: none
      &:after
        content: ''
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        background: left
          size: cover
          repeat: no-repeat
          position: center
          image: url("/img/backgrounds/invest-image@0,5x.jpg")

      +respond-to-width(450)
        width: 100%

        &:after
          background-image: url("/img/backgrounds/invest-image@0,25x.jpg")