.extension-row
  padding: 60px 0 65px
  h2
    +font-default(32px)
    font-size: 28px
    color: $darkerBlue
    text-align: center
    width: $contentGrid*10
    margin: 0 auto

  .price-month
    +font-light(18px, 18px)
    font-size: 16px
    color: $gray
    width: $contentGrid*10
    margin: 0 auto

  .extensions
    width: $contentGrid*10
    margin: 15px auto 0
    +flex(space-between, flex-start)
    +flex-direction(row)
    +flex-wrap(wrap)
    +flex-flow(row wrap)

    .extension
      width: calc((100% - 35px ) / 2 )
      background-color: $lighterGray
      padding: 30px 3.5%
      margin-bottom: 35px
      .header
        +flex(space-between, flex-start)
        h4
          +font-light(22px, 22px)
          font-size: 20px
          color: $darkBlue

        span
          +font-default(34px, 34px)
          font-size: 30px
          color: $darkBlue
          height: 100%
          +flex(center, center)
          position: relative
          &:before
            content: '€'
            color: $darkBlue
            +font-default(18px, 18px)
            font-size: 16px !important
            position: relative
            top: -4px
            left: -3px
      .content
        max-width: 375px
        p, h2, strong, a, li
          +font-light(18px, 21px)
          font-size: 16px
          color: $darkBlue

+media-query(1050px)
  .extension-row
    .extensions
      width: $contentGrid*12

+media-query(850px)
  .extension-row
    .extensions
      width: $contentGrid*10
      +flex(center, flex-start)
      .extension
        width: 100%
        margin-bottom: 5px

+media-query(640px)
  .extension-row
    .price-month
      text-align: center


+media-query(500px)
  .extension-row
    padding-bottom: 15px
    .content-container
      width: 100%
    .extensions
      width: 100%
      .extension
        padding: 40px 20px