.discover
  position: relative
  padding: 100px 0
  background-color: $bluePurple3
  background: linear-gradient(-135deg, $bluePurpleGradient23)

  +respond-to-width(600)
    padding: 60px 0 40px

  &:after
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: 
      image: url("/img/shapes/discover.svg")
      size: cover
      position: 50% 100%

  h2
    font-size: 1.4rem
    line-height: 1.6
    color: white
    padding: 0 column(1, 12) 50px

    +respond-to-width(600)
      padding-bottom: 25px


  .discover-blocks
    position: relative
    z-index: 2
    width: 95%
    max-width: 1300px
    margin: 0 auto
    text-align: center


    .block
      display: inline-block
      width: 50%
      font-size: 4rem

      +respond-to-width(900)
        font-size: 3rem

      &:nth-child(1)
        vertical-align: bottom
        a
          +flex(flex-end, flex-end)

          .wrapper
            right: 0
            bottom: 0
            transform-origin: 100% 100%

          p
            font-size: 1em

      &:nth-child(2)
        vertical-align: bottom
        width: 45%
        a
          +flex(flex-start, flex-end)

          .wrapper
            left: 0
            bottom: 0
            transform-origin: 0% 100%

          p
            font-size: 0.75em

      &:nth-child(3)
        vertical-align: top
        width: 40%
        a
          +flex(flex-end, flex-start)

          .wrapper
            right: 0
            top: 0
            transform-origin: 100% 0%

          p
            font-size: 0.75em

      &:nth-child(4)
        vertical-align: top
        width: 35%
        a
          +flex(flex-start, flex-start)

          .wrapper
            left: 0
            top: 0
            transform-origin: 0% 0%

          p
            font-size: 0.65em

      a
        position: relative
        cursor: pointer

        .wrapper
          position: absolute
          width: 90%
          overflow: hidden
          transform: scale3d(1, 1, 1)
          will-change: transform
          transition: transform 0.8s

          &.static
            position: relative
            width: 100%

        .placeholder
          position: relative
          width: 100%
          padding-bottom: 66.67%
          height: 0
          text-decoration: none
          cursor: pointer

          .background
            position: absolute
            width: 110%
            height: 110%
            top: -5%
            left: -5%
            background-size: cover
            background-position: center
            filter: blur(3px)
            image-rendering: -webkit-optimize-contrast

        p
          position: absolute
          right: 5%
          bottom: 10%
          display: block
          margin: 0
          font-family: rubik()
          text-shadow: 0px 0px 30px rgba(0, 0, 0, 1)
          line-height: 1
          color: white
          opacity: 0
          transition: opacity 0.4s

        .hover-icon
          position: absolute
          display: block
          width: 45px
          height: 45px
          z-index: 3
          right: 0
          top: 0
          font-size: 20px !important
          line-height: 1 !important
          color: white
          font-family: rubik()
          text-align: right
          padding: 2px 8px 0 0
          opacity: 0
          transition: opacity 0.4s


          &:after
            content: ''
            display: block
            position: absolute
            z-index: -1
            right: 0
            top: 0
            width: 0
            height: 0
            border-style: solid
            border-width: 0 45px 45px 0
            border-color: transparent $brightBlue transparent transparent

        &:hover, &.last-hover
          .wrapper
            transform: scale3d(1.1, 1.1, 1)

            +respond-to-width(600)
              transform: scale3d(1, 1, 1)

          .placeholder
            .background
              filter: blur(0)
            .hover-icon
              opacity: 1
            p
              opacity: 1
              transition-delay: 0.4s

        +respond-to-width(1050)
          .wrapper
            width: 100%

          .placeholder
            .background
              filter: blur(0)
            .hover-icon
              opacity: 1
            p
              opacity: 1
              transition-delay: 0.4s

    +respond-to-width(600)
      width: column(12, 14)
      .block
        display: block
        width: 100% !important
        margin-bottom: 40px
        a
          p
            font-size: 1em !important

    +respond-to-width(450)
      .block
        font-size: 2rem