#posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  h2 {
    grid-column: 1 / 4;
  }

  @media (max-width: $medium-breakpoint) {
    grid-template-columns: repeat(2, 1fr);

    h2 {
      grid-column: 1 / 3;
    }
  }

  @media (max-width: $small-breakpoint) {
    grid-template-columns: repeat(1, 1fr);

    h2 {
      grid-column: 1 / 1;
    }
  }

  .year {
    padding-bottom: 2rem;

    h3 {
      margin: 0;
    }
  }

  .posts {
    list-style: none;
  }

  .post {
    margin-bottom: 0;

    &.newest {
      font-weight: bolder;
    }

    a {
      display: block;
      padding: 0.5rem;
    }
  }
}