.discover-row
  //background: linear-gradient(-90deg, $blueGradient)
  padding: 70px 0 120px

  .streamer
    color: $darkGreen
    font-size: 0.65rem
    font-weight: semi-bold()
    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: 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: 30px
          width: 100%
          font-size: 1.5rem
          line-height: 1.2
          color: white
          font-weight: semi-bold()

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

        .arrow-placeholder
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background: linear-gradient(135deg, $orangeGradient)
          +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: white

      &:hover
        .overlay
          .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