ul.overview
  width: 100%

  li
    position: relative
    display: block

    a
      display: block
      @extend %clearfix 

    .top-grey
      +position(absolute, 0 null null 0)
      z-index: 2
      width: 100%
      height: 80px
      background: #C4C7C6

    .background
      +position(absolute, 0 null null 0)
      width: 50%
      height: 100%

      &.right
        left: auto
        right: 0
      &.light
        background: #fff
      &.dark
        background: $light-background

    .image-holder,.title-holder
      position: relative
      z-index: 10
      float: left
      width: 50%
      height: 280px

      +respond-to(small)
        height: 240px
      +respond-to(mobile)
        height: 160px

    .image-holder
      overflow: hidden
      background: #ccc

      img
        width: 100%
        +transition(transform 150ms ease-out)

    .title-holder
      background: #fff
      text-align: center
      +valign-parent
      color: #000

      .title
        position: relative
        +valign-child
        font-size: 2.181818em

        .line
          +position(absolute, null null -4px 50%)
          display: block
          width: 0
          height: 1px
          background: #878787

          +transition(width 150ms ease-out, left 150ms ease-out)

    &:hover
      .image-holder
        img
          +transform(scale(1.1))

      .title-holder
        .title
          .line
            left: 0
            width: 100%