/*==========================================================================
  News overview page
  ========================================================================== */
.news

  .no-news
    padding: 60px 20px 0
    text-align: center
    color: $semiBlack

  .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
      margin-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(1500)
        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