.large-badges-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

      &.first-page
        grid-template-rows: 1fr 1fr 1fr
        grid-template-areas: "first first item-2" "first first item-3" "item-4 item-5 item-6"

        article:first-child
          grid-area: first

      article
        margin: 0

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

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

        &.first-page
          grid-template-areas: "first first" "first first"

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

      +respond-to-width(840)
        display: block
        max-width: 520px
        margin-left: auto
        margin-right: auto
        article
          margin-bottom: 30px

  article
    width: 100%
    max-width: 520px
    background: $blue
    box-shadow: 0 0 40px 0 rgba(0,0,0,0.2)

    font-size: 1rem
    line-height: 1.6

    @supports (display: flex)
      height: 100%
      max-width: none
      a
        height: 100%
        padding-bottom: 0

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

    a
      display: block
      position: relative
      width: 100%
      height: 0
      padding-bottom: 65%
      text-decoration: none

      @supports (display: flex)
        height: 100%

      figure
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%

        &:before
          content: ''
          position: absolute
          z-index: 1
          left: 0
          top: 0
          width: 100%
          height: 100%
          background: $blue
          opacity: 0.6
          transition: opacity 0.4s

        span
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          background-size: cover
          background-position: center
          display: none

          &.medium
            display: block


      .date
        position: absolute
        left: 8%
        top: 12%
        z-index: 3
        font-size: 3em
        font-weight: bold()
        line-height: 1
        color: $lightBlue
        transition: color 0.4s

        +respond-to-width(950)
          font-size: 2.5em

        +respond-to-width(950)
          font-size: 2em

      h2
        position: absolute
        z-index: 4
        width: calc(80% - 10px)
        left: 9%
        bottom: 9%
        color: white

        font-size: 1.1em
        line-height: 1.4
        font-weight: semibold()
        transition: color 0.4s

        .arrow
          position: absolute
          z-index: 2
          width: 15px
          right: -20px
          bottom: -7px
          transform: translate3d(0,0,0)
          transition: transform 0.4s

          .arrow-icon
            width: 100%
            transform-origin: center
            transform: rotate(270deg)

            .st0
              fill: $lightBlue
              transition: fill 0.4s

    &:hover
      a
        figure
          &:before
            opacity: 0.2

        .arrow
          transform: translate3d(5px,0,0)
          .arrow-icon
            .st0
              fill: white

        h2, .date
          color: white

    +respond-to-width(480)
      a
        height: auto
        padding-bottom: 0

        figure
          position: relative
          height: 0
          padding-bottom: 65%

        .arrow
          display: none

        h2
          position: relative
          width: 100%
          left: 0
          bottom: 0
          padding: 20px 15px

    .first-page &
      &#post-0
        a
          padding: 5% 8%

          .ie &
            padding: 0 0 65% !important

            .date
              font-size: 3em !important

            h2
              font-size: 1.1em !important

            +respond-to-width(480)
              padding-bottom: 0 !important
              height: auto

          figure
            span
              &.medium
                display: none
              &.large
                display: block

              +respond-to-width(950)
                &.large
                  display: none
                &.medium
                  display: block

          .date
            top: 8%
            font-size: 3.75em

          h2
            font-size: 2em
            padding-right: 15% !important

            +respond-to-width(1750)
              padding-right: 15%

          +respond-to-width(840)
            padding: 0 0 65%

            .date
              top: 12%
              font-size: 2em

            h2
              font-size: 1.1em
              padding-right: 20px !important

          +respond-to-width(480)
            height: auto
            padding-bottom: 0