.squares-grid

  &:before
    content: ''
    position: absolute
    display: block
    width: 100%
    height: 300px
    background-color: $blue

  +respond-to-width(1200)
    &:before
      height: 240px

  +respond-to-width(500)
    &:before
      height: 150px

  .overview
    padding: 60px 0 0

    +flex(space-between, flex-start)
    +flex-rows

    article
      margin: 0 15px 60px

      +respond-to-width(480)
        margin: 0 0 30px

    @supports (display: flex)
      display: grid
      grid-template-columns: 1fr 1fr 1fr
      grid-gap: 60px 60px
      padding-bottom: 60px

      article
        margin: 0

      +respond-to-width(1700)
        grid-gap: 30px 30px

      +respond-to-width(1000)
        grid-gap: 60px 60px
        grid-template-columns: 1fr 1fr

      +respond-to-width(950)
        grid-gap: 30px 30px

      +respond-to-width(800)
        display: block
        max-width: 520px
        margin-left: auto
        margin-right: auto

  article
    width: 100%
    max-width: 520px
    //background: $blue

    font-size: 1rem
    line-height: 1.6

    @supports (display: flex)
      height: 100%
      max-width: none

    +respond-to-width(600)
      font-size: 0.9rem

    a
      display: block
      position: relative
      width: 100%
      text-decoration: none

    figure
      position: relative
      z-index: 2
      width: 100%
      height: 0
      padding-bottom: 100%
      //box-shadow: 0 0 40px 0 rgba(0,0,0,0.2)

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

        background-size: cover
        background-position: center
        overflow: hidden

        &:before
          content: ''
          display: block
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background-color: $blue
          transform-origin: 100% 100%

          $cornerSize: 60
          transform: rotate(45deg) translate3d(calc(100% - #{$cornerSize}px), 50%, 0) scale3d(1, 1, 1)
          transition: background-color 0.5s, transform 0.5s ease-in-out


      .styling
        position: absolute
        right: 0
        bottom: 0
        +flex(center, center)
        width: 50px
        height: 50px
        border-radius: 50px 0 0 0
        transition: all 0.4s

        .arrow
          position: relative
          z-index: 2
          left: 4px
          bottom: -5px
          display: inline-block
          width: 13px
          transform: translate3d(0,0,0) scale3d(1,1,1)
          transition: transform 0.5s

          .arrow-icon
            transform-origin: center
            transform: rotate(270deg)
            .st0
              fill: white
              transition: fill 0.5s

    h2
      text-align: center
      font-size: 0.9rem
      line-height: 1.2
      color: $purple
      font-weight: 400

    &:hover
      figure

        .image
          &:before
            $cornerSize: 60
            background-color: rgba($blue , 0.6)
            transform: rotate(45deg) translate3d(calc(100% - #{$cornerSize}px), 50%, 0) scale3d(2.5, 1, 1)

        .styling
          width: 100%
          height: 100%

          .arrow
            transform: translate3d(0,5px,0) scale3d(2.5, 2.5, 1)

    +respond-to-width(800)
      + article
        margin-top: 30px !important

      figure
        padding-bottom: 66.67%