.content-block

  .grid-row
    position: relative

  .image
    position: absolute
    height: 100%

    span
      position: absolute
      width: 100%
      height: 100%
      background-position: center
      background-size: cover

    .medium
      display: none

  .content
    padding: 100px column(1, 12)

  &[data-size-type='33']
    padding: 100px 0
    .image
      width: column(7, 12)
      position: relative
      img
        width: 100%

    .content
      padding-top: 0
      padding-bottom: 0
      width: column(5, 12)
      margin-left: 0

  &[data-size-type='50']
    .image
      top: 0
      width: column(5, 12)
      left: column(1, 12)

    .content
      width: 50%
      margin-left: 50%

  &[data-size-type='66']
    background-color: $blue


    .image
      top: 0
      width: column(5, 12)
      left: column(-1, 12)

    .content
      width: column(6, 12)
      margin-right: column(1, 12)
      margin-left: column(5, 12)


  &[data-image-location='right']
    .grid-row
      +flex(flex-start, center)

    .content
      +order(1)
      margin-left: 0

    .image
      +order(2)
      top: 0
      right: column(1, 12)
      left: auto

    &[data-size-type='33']
      .image
        right: 0

    &[data-size-type='66']
      .content
        margin-left: 0

      .image
        right: column(-1, 12)



  +respond-to-width($mdGridBreakpoint)
    .image
      left: 0
      width: 50%
    .content
      width: 50%
      margin-right: 0
      margin-left: 50%
      padding: 100px column(1, 12)

    &[data-image-location='right']
      .content
        margin-left: 0
        margin-right: 0

      .image
        right: 0





  +respond-to-width(1000)
    &[data-size-type='66']
      .content
        width: column(7, 12)
        margin-right: 0

    &[data-size-type='50']
      .content
        width: column(7, 12)

    &[data-size-type='33']
      .content
        padding-right: 0

      &[data-image-location='right']
        .image
          width: 50%

  +respond-to-width(840)
    .grid-row
      +flex-rows
      width: 100%

    .image
      position: relative
      width: 100% !important
      +order(2)
      left: 0 !important
      right: 0 !important
      top: 0 !important
      bottom: 0 !important
      padding-bottom: 65%

    .content
      +order(1)
      width: column(12, 14) !important
      margin: 0 auto !important
      padding: 50px 0
      font-size: 1rem