.about-first-row
  position: relative
  overflow-x: hidden
  +flex()

  +respond-to(mobile)
    position: relative
    flex-direction: column

  .key-values-block
    +flex(flex-end, flex-start)
    background: url('/img/structure/waves.svg')
      repeat: no-repeat
      position: -300px 250px
    background-size: 1900px 430px
    padding-top: 75px
    width: $contentGrid*5

    ul
      margin: 0
      padding: 0
      li
        margin-bottom: 20px
        +flex(flex-start, center)
        .icon
          width: 25px
          height: 25px
          margin-right: $iconSpace
          display: inline-block
          img
            width: 100%

    +respond-to(medium)
      justify-content: center

    +respond-to(mobile)
      text-align: center
      width: $contentGrid*12
      padding: $paddingSmall
      +order(2)

    .key-values-content
      max-width: $maxWidth / 80 * 30
      padding: 0px 50px 0px 50px

      +respond-to(medium)
        max-width: none
      +respond-to(mobile)
        padding: 0

  .about-intro-wrapper
    width: $contentGrid*7

    +respond-to(mobile)
      width: $contentGrid*12
      +order(3)

  .about-intro-block
    +flex(flex-start, flex-start)
    background: $lightGray
    position: relative

    .about-intro-block-content
      margin-left: $contentGrid*2
      padding-top: 75px
      padding-bottom: $paddingSmall
      max-width: $maxContentWidth

      +respond-to(mobile)
        padding: 0
        margin: 0

    +respond-to(medium)
      padding-right: $contentGrid*1

    +respond-to(mobile)
      +flex(center, flex-start)
      width: $contentGrid*12
      padding: $paddingSmall

  .image-background
    background: url('/img/structure/bg_sailor.jpg')
    background-size: cover
    background-position: bottom right
    width: 200%
    min-height: 700px

    +respond-to(mobile)
      width: $contentGrid*12
      min-height: 300px

  .about-floating-block
    +flex(flex-end, center)
    flex-direction: column
    padding: $paddingSmall
    position: absolute
    width: $contentGrid*4
    height: 500px
    background: $blue
    color: white
    max-width: 600px
    right: $contentGrid*6
    bottom: 100px

    .about-floating-block-content
      width: 100%
      +respond-to(mobile)
        max-width: $maxContentWidth

    .floating-block-title
      +flex(flex-start, center)
      .icon
        width: 50px
        height: 50px
        margin-right: $iconSpace
        display: inline-block
        img
          width: 100%
      .sub-title
        margin-bottom: 0

    p
      width: 100%

    +respond-to(medium)
      width: $contentGrid*5
      left: $contentGrid*1
      max-width: none

    +respond-to(mobile)
      position: relative
      width: $contentGrid*12
      max-width: none
      left: 0
      bottom: 0
      height: auto
      +order(3)

.about-second-row
  position: relative
  +flex()

  .about-extra-content-block
    +flex(center, center)
    width: $contentGrid*5
    background: $lightGray
    padding-top: 100px
    padding-left: $contentGrid
    padding-right: $contentGrid
    padding-bottom: 100px

    +respond-to(small)
      width: 100%
      padding: $paddingSmall

    .about-extra-content-block-content
      max-width: $maxContentWidth
      +respond-to(small)
        max-width: $maxContentWidth

  .about-quote-block
    +flex(flex-start, flex-start)
    width: $contentGrid*7
    padding-top: 100px
    padding-left: $contentGrid
    padding-right: $contentGrid*2
    padding-bottom: 100px

    +respond-to(small)
      width: $contentGrid*12
      padding: $paddingSmall
      +flex(center, center)
    p
      font-style: italic

  +respond-to(small)
    flex-direction: column

  .about-quote-block-content
    max-width: $maxContentWidth
    +respond-to(small)
      max-width: $maxContentWidth

.profile-next-to-name
  +flex(flex-start, flex-start)

  .profile-image-name
    align-self: center
    margin-left: 25px