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

  .streamer
    color: $semiLightBlue
    font-size: 0.65rem
    font-weight: semibold()
    text-transform: uppercase
    margin: 0 0 35px

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

    article
      position: relative
      width: 25%

      a
        text-decoration: none

      picture
        width: 100%
        img
          width: 100%


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

        h4
          position: absolute
          left: calc(100% - 25px)
          bottom: 25px
          width: 100%
          margin: 0
          font-size: 1.5rem
          line-height: 1.2
          color: white
          font-weight: semibold()
          text-shadow: 0 2px 10px rgba(#243066,0.4)

          transform-origin: 0 100%
          transform: rotate(270deg)
          transition: color 0.4s, text-shadow 0.4s

        .arrow-placeholder
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background: $whiteBlue
          +flex(center, center)
          opacity: 0
          transition: opacity 0.4s

          span
            display: block
            width: 45px

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

              &.arrow-icon
                .st0
                  fill: $semiLightBlue

      &:hover
        .overlay
          h4
            color: $semiLightBlue
            text-shadow: 0 2px 10px rgba(#243066,0)

          .arrow-placeholder
            opacity: 1


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

      article
        width: 50%

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

      article
        width: 100%

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