.discover-row
  background: $offWhite
  padding: 70px 0 120px
  overflow: hidden

  .streamer
    color: $blue
    font-size: 0.65rem
    font-family: $fontDroidSans
    text-transform: uppercase
    margin: 0 0 35px

  .links
    +flex(center, flex-start)
    overflow: visible
    box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2)

    article
      position: relative
      width: calc(100% / 3)

      &::before
        content: ''
        position: absolute
        bottom: 0
        right: 0
        display: inline-block
        height: 160px
        width: 100%
        background: linear-gradient(to bottom, transparent, rgba(130,130,130, 0.7))

      +respond-to-width-beyond(600)
        &::before
          top: 0
          bottom: auto
          width: 160px
          height: 100%
          background: linear-gradient(to right, transparent, rgba(130,130,130, 0.7))

      a
        text-decoration: none

      picture
        width: 100%
        img
          width: 100%


      .overlay
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        overflow: hidden

        h4
          position: absolute
          left: calc(100% - 25px)
          bottom: 25px
          width: 100%
          margin: 0
          font-size: 1.5rem
          line-height: 1.2
          color: white
          font-family: $fontDroidSans
          font-weight: 100

          transform-origin: 0 100%
          transform: rotate(270deg)

        .arrow-placeholder
          +flex(center, center)
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background: $darkBlue
          opacity: 0
          transition: all 400ms ease-out
          transform: scale(1.5)
          pointer-events: none

          span
            display: block
            width: 45px

            svg
              width: 100%
              transform-origin: center
              transform: rotate(270deg)

              &.arrow-icon
                .st0
                  fill: white

      &:hover
        .overlay
          .arrow-placeholder
            opacity: 1
            transform: none
            transition: all 0.4s ease-out


    +respond-to-width(900)
      +flex-rows

      article
        width: 50%
        margin-right: auto

    +respond-to-width(600)
      display: block

      article
        width: 100%

        .overlay
          h4
            transform: rotate(0deg)
            left: 30px
            bottom: 25px