Making the Blog section responsive

This Blog section is based on a three-column grid, and it works pretty well on desktops and tablets; however, on a mobile, it shrinks a bit too much, so we'll need to change the three columns to two columns (and one column for a small mobile):

Mobile view of the Blog section

To change the width of the column, let's head to the .blog-post class we created and change the value of the width to 50% on a large mobile breakpoint:

.blog-post {
  width: 33.33%;
  padding: 0 5px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

/* Large Mobile Styles */
@media only screen and (max-width: 768px) {
  .blog-post {
    width: 50%;
  }
}

/* Small Mobile Styles */
@media only screen and (max-width: 400px) {
  .blog-post {
    width: 100%;
  }
}

This will make sure that the content will still be readable, regardless of the device it will be appearing on. 

Also, the title seems a bit big as well. We can reduce thefont-size by 40px when in mobile view:

#blog h2 {
  font-family...