// Grid with thumbs
.post-grid
  display: grid
  align-items: center
  justify-content: center
  grid-template-columns: 1fr 1fr 1fr
  grid-gap: 4vw

  +respond-to-width($mdGridBreakpoint)
    grid-template-columns: 1fr 1fr

  +respond-to-width($xsGridBreakpoint)
    grid-template-columns: 1fr

  // Thumb
  .post-thumb
    align-self: start
    margin-bottom: column(.5,3)
    text-align: center

    .link-to-post,
    .category
      color: inherit
      text-decoration: none

    .link-to-post
      display: block

    figure
      width: 100%
      margin: 0
      padding-bottom: 56%
      background: #1D2433 center center
      background-size: cover

    .title
      display: block
      margin: column(0.33333,3) auto 15px
      color: $blue
      font-size: 1.2rem
      line-height: 1.4

    .category
      display: inline-block
      margin-top: 30px
      color: rgba(100,100,100,0.3)
      font-size: 16px
      font-weight: semibold()

      &:hover
        color: $brightBlue