.squares-grid

  .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
    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%
      background: $darkBlue
      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

      .styling
        position: absolute
        right: 0
        bottom: 0
        height: 68px
        width: 68px
        border-color: transparent
        border-style: solid
        border-width: 50px
        border-right: 50px solid $blue
        border-bottom: 50px solid $blue
        transition: all 0.3s cubic-bezier(0.49, 0.08, 0.11, 1)
        pointer-events: none

        .arrow
          position: absolute
          right: -25px
          bottom: -40px
          display: inline-block
          width: 11px

          .arrow-icon
            transform-origin: center
            transform: rotate(-90deg)
            max-height: 20px
            .st0
              fill: white

    h2
      text-align: center
      font-size: 1.1rem
      line-height: 1.2
      color: $darkBlue
      font-weight: normal


    &:hover
      figure
        .styling
          width: 100%
          height: 100%
          border-color: rgba($blue, 0.6)
          transition: all 0.3s cubic-bezier(0.49, 0.08, 0.11, 1)

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

      figure
        padding-bottom: 66.67%