.overview-block
  position: relative
  z-index: 1
  margin: 50px auto
  max-width: 1125px
  padding: 0 $contentBlock1Grid 0 $contentBlock1Grid

  >.span8
    margin-left: $contentBlock1Grid*3


  .overview-dimension
    +position(absolute, null $contentBlock1Grid null $contentBlock1Grid)
    width: $contentBlock1Grid* 10
    height: 100%
    margin-top: -20px
    z-index: -1
    background-color: $contentBackground1

  .overview-item
    margin-top: 50px
    width: calc(((100% / 12) * 8) - 4%)
    float: left
    padding: 0 2%

    &:nth-of-type(3n + 1)
      margin-left: $contentBlock1Grid* -8
      clear: both

    &:nth-of-type(3n + 3)
      margin-right: $contentBlock1Grid* -8

    p
      span
        +arrowRightWhite
        display: inline-block
        margin-left: 10px
        +transition(all 0.5s)

    .image-container
      height: 250px //recalculated by javascript
      background-size: cover
      background-position: 50% 50%
      background-repeat: no-repeat
      margin-bottom: 15px
      +transform(scale(1.0))
      +transition(all 0.5s)
      &:hover
        +transform(scale(1.02))
    &:hover
      p
        span
          margin-left: 15px


+media-query(1700px)
  .overview-block
    >.span8
      width: 100%
    .overview-item
      width: calc(((100% / 12) * 7) - 4%)
      padding: 0 3%
      &:nth-of-type(3n + 1)
        margin: 50px 0 0 0
        clear: none

      &:nth-of-type(3n + 3)
        margin: 50px 0 0 0
        clear: none

      &:nth-of-type(2n + 1)
        margin-left: $contentBlock1Grid* -4.5
        clear: both

+media-query(900px)
  .overview-block
    .overview-dimension
      width: calc(100% - (100%/12 *2))

+media-query(575px)

  .overview-block
    >.span8
      width: 100%
      margin-left: 0

    .overview-dimension
      +position(absolute, null $contentBlock1Grid*2 null $contentBlock1Grid*2)
      width: $contentBlock1Grid* 8
    .overview-item
      width: 100%
      padding: 0%

      &:nth-of-type(2n + 1)
        margin: 50px 0 0 0
        clear: both