@media only screen and (max-width: 600px) {
  .blog-display {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 870px) and (min-width: 601px) {
  .blog-display {
    grid-template-columns: auto auto;
    column-gap: 20px;
  }
}

@media only screen and (min-width: 871px) {
  .blog-display {
    grid-template-columns: auto auto auto;
    column-gap: 30px;
  }
}

nav {
  padding: 20px;
}

.blog-display {
  display: grid;
  padding: 20px;
  row-gap: 20px;
}

.blog-display a {
  text-decoration: none;
  border: 2px solid rgb(90, 89, 89);
  border-radius: 10px;
  color: white;
  padding: 15px 0;
}

.blog-container {
  padding: 5px;
}

.blog-container img {
  width: 100%;
  margin: 10px 0;
}

.blog-container p {
  color: #cacaca;
  padding-left: 10px;
}

.blog-container h2 {
  padding-bottom: 10px;
  padding-left: 10px;
}