$iconSpace: 30px

.method-wrapper
  +flex(center, center)
  flex-direction: column
  position: relative
  background-image: url('/img/structure/bg_pattern.png')
  padding: 100px $paddingSmall 50px

  +respond-to(small-mobile)
    padding-bottom: 0

  .first-row
    align-self: stretch
    width: 100%
    margin: 0 auto
    margin-bottom: 50px
    max-width: $maxWidth
    +flex(space-between, flex-start)

    +respond-to-width(620)
      flex-direction: column

    .title
      color: white
      width: $contentGrid*3

      +respond-to-width(620)
        width: 100%
    .description
      color: white
      width: $contentGrid*5
      max-width: $maxContentWidth

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

  .second-row
    align-self: stretch
    margin-bottom: 100px
    .kernwaarden-wrapper
      +flex(space-between, flex-start)
      flex-wrap: wrap
      margin: 0 auto
      max-width: $maxWidth

      .kernwaarden-block-wrapper
        +flex(center, flex-start)
        padding: 25px 25px 50px 0px
        &:last-child
          padding: 25px 0 50px 0

        +respond-to-width(1400)
          width: 33.3%
          &:nth-child(3)
            padding-right: 0
          &:nth-child(4)
            width: 50%
            padding-right: 2%
            .kernwaarden-block
              margin-left: auto
          &:nth-child(5)
            width: 50%
            padding-left: 2%
            .kernwaarden-block
              margin-right: auto

        +respond-to(mobile)
          width: 50%
          margin: 0
          padding: 0
          padding-bottom: 75px
          &:nth-child(4)
            padding-right: 0
            .kernwaarden-block
              margin-left: 0
          &:nth-child(5)
            padding-left: 0
            .kernwaarden-block
              margin-right: 0

        +respond-to-width(620)
          width: 100%
          &:nth-child(4)
            width: 100%
          &:nth-child(5)
            width: 100%

        .kernwaarden-block
          text-align: center
          position: relative
          padding: 50px 30px 15px 30px
          background:
            color: white
          width: 230px
          min-height: 225px

          +respond-to-width(620)
            min-width: 230px
            min-height: 195px

          &:before
            content: ''
            position: absolute
            top: 0
            left: 0
            background:
              color: $lightBlue
            height: 20px
            width: 230px

          &:after
            content: ''
            position: absolute
            bottom: -100px
            left: 0
            width: 0px
            height: 50px
            border-left: 115px solid transparent
            border-right: 115px solid transparent

            border-top: 50px solid #fff


          .kernwaarden-title
            +font-default(22px, 30px)
            color: $lightBlue