#about
  .about-custom-row
    background-color: $lighterGrey

    .grid-row
      position: relative
      +flex(flex-start, center)


    .logo-block
      position: absolute
      +flex(center, center)
      width: column(4, 12)
      height: 100%
      left: column(-1, 12)
      top: 0
      background: $darkRed

      .icon
        width: 110px

        img
          width: 100%
          max-height: 91px

    .image-placeholder
      margin-left: 25%
      width: 25%
      .image
        position: relative
        width: 100%
        height: 0
        padding-bottom: 150%

        span
          position: absolute
          left: 0
          top: 0
          display: block
          height: 100%
          width: 100%
          background:
            size: cover
            position: center
            repeat: no-repeat
            image: url("/img/about/about-ruud.jpg")

          +respond-to-width(600)
            background-image: url("/img/about/about-ruud-horizontal.jpg")


    .contact-info
      width: 50%
      padding: column(1, 14)

      p
        font-size: 1.6rem
        line-height: 1.2
        margin: 0
        color: $blackBlue
        +karla

      span
        display: block
        margin-top: 15px
        color: $blueGrey
        font-size: 1.1rem

      a
        display: inline-block
        margin-top: 40px
        font-size: 1rem
        color: $blackBlue
        font-weight: semibold()
        text-decoration: none
        transition: color 0.2s

        &:hover
          color: rgba($blackBlue, 0.7)

    +respond-to-width(1000)
      .grid-row
        width: 100%
        +flex-rows
        margin-bottom: 250px

      .logo-block
        width: 50%
        left: 0

      .image-placeholder
        width: 50%
        margin-left: 50%

      .contact-info
        position: absolute
        left: 0
        bottom: -250px
        height: 250px
        width: 100%
        text-align: center

    +respond-to-width(600)
      .grid-row
        margin-bottom: 0

      .logo-block
        position: relative
        width: 100%
        height: 250px

      .image-placeholder
        width: 100%
        margin-left: 0

        .image
          padding-bottom: 65%

      .contact-info
        position: relative
        bottom: 0
        height: auto

        padding: 60px column(1, 14)