.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
      color: $darkgrey

    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

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

        .arrow
          position: relative
          left: 4px
          bottom: -5px
          display: inline-block
          width: 13px
          transform: translate3d(0,0,0)
          transition: transform 0.3s

          .arrow-icon
            transform-origin: center
            transform: rotate(270deg)
            color: $yellow

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

    &:hover
      figure
        .styling
          width: 100%
          height: 100%
          border-radius: 0 0 0 0
          background-color: rgba($darkgrey, 0.6)

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

      figure
        padding-bottom: 66.67%