.colleagues-row
  >h2
    max-width: 960px
    width: 100%
    margin: auto
    +font-light(30px, 34px)
    font-size: 28px
    color: $darkBlue
    margin-bottom: 10px

  >p
    max-width: 960px
    width: 100%
    margin: auto
    +font-light(20px, 26px)
    font-size: 18px
    line-height: 24px
    color: $lightBlue

  .colleagues
    width: 100%
    max-width: 960px
    margin: auto
    +flex(space-between, flex-start)
    +flex-rows
    padding: 50px 0 50px

    .colleague
      width: 20%
      margin: 0 2.5% 50px
      .image
        width: 180px
        height: 180px
        margin: auto
        border-radius: 9999px
        background-size: cover
        background-position: center

      p
        +font-light(18px, 24px)
        font-size: 16px
        line-height: 22px
        color: $darkBlue
        text-align: center
        strong
          +font-semi-bold(18px, 24px)
          font-size: 16px
          line-height: 22px
          display: block

      &:nth-child(4n + 1)
        margin-left: 0
      &:nth-child(4n + 4)
        margin-right: 0

+media-query(960px)
  .colleagues-row
    .colleagues
      .colleague
        width: 30%

        &:nth-child(4n + 1)
          margin-left: 2.5%
        &:nth-child(4n + 4)
          margin-right: 2.5%

        &:nth-child(3n + 1)
          margin-left: 0
        &:nth-child(3n + 3)
          margin-right: 0

+media-query(666px)
  .colleagues-row
    .colleagues
      .colleague
        width: 45%

        &:nth-child(3n + 1)
          margin-left: 2.5%
        &:nth-child(3n + 3)
          margin-right: 2.5%

        &:nth-child(2n + 1)
          margin-left: 0
        &:nth-child(2n + 2)
          margin-right: 0

+media-query(460px)
  .colleagues-row
    text-align: center
    .colleagues
      .colleague
        width: 100%
        margin-left: 0 !important
        margin-right: 0 !important