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

/* write your style declarations here */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .container {
      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) {
    .container {
      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;
    }
  }