.candidates
  .placeholder
    width: column(10, 12)
    padding: 60px 0
    margin: auto

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


    article
      font-size: 1rem
      line-height: 1.4
      max-width: 850px
      margin: 0 auto 60px


      .person
        +flex(space-between, flex-start)

        figure
          width: 200px
          height: 200px
          position: relative
          span
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            border-radius: 100%
            background:
              size: cover
              position: center


        .wrapper
          width: 100%
          &.with-image
            width: calc(100% - 240px)

          h3
            font-size: 1.6rem
            color: $darkGreen
            font-weight: bold()
            +flex(flex-start, flex-start)

            strong
              width: calc(100% - 50px)

            span
              color: $lightGray
              display: block
              font-size: 1.4rem
              width: 50px
              line-height: 1.55

          h4
            padding-left: 50px
            font-size: 1.2rem
            color: $orange
            opacity: 0.4

          .description
            padding-left: 50px
            color: $darkGray
            font-size: 0.8rem

      .why-cranendonck
        margin-top: 20px
        padding-left: 50px

        &.with-image
          padding-left: 0

        h5
          font-size: 1.2rem
          color: $darkGreen
          font-weight: bold()
          opacity: 0.6

        p
          font-size: 0.8rem
          color: $darkGray
          &:first-of-type
            margin-top: 5px

      +respond-to-width(600)
        .person
          display: block
          figure
            margin: 0 auto 30px

          .wrapper.with-image
            width: 100%

        .why-cranendonck.with-image
          padding-left: 50px