/* STRETCH GOAL */
/* 4-col and 3-col layouts for different screen sizes. */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .posts {
    max-width: 1024px;
    grid-template-columns: repeat(4, 1fr); /* creates 4 column layout */
  }

  .posts__two {
    grid-column: span 3;
  }

  .posts__three,
  .posts__four {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .posts {
    max-width: 768px;
    grid-template-columns: repeat(3, 1fr); /* creates 3 column layout */
  }

  .posts__two {
    grid-column: span 2;
  }

  .posts__three,
  .posts__four,
  .posts__eight {
    display: none;
  }
}