/* ################  

 CSS specifc to BLOG.php

#################   */

.blog-container{
  padding-top: 7rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2rem;
}  

.blog-post {
  padding: 20px;
}

.blog-post h1 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.blog-post img {
  width: 100%;
  height: auto;
}

.blog-post p {
  margin-bottom: 10px;
}

.blog-post a {
  color: black;
  text-decoration: none;
}

/* Adjustments for Small devices (landscape phones, 768px and down) */
@media only screen and (max-width: 768px) {
    
    .blog-container {
       padding-top: 3rem;
       grid-template-columns: repeat(2, 1fr); 
    }
}

/* Adjustments for Extra small devices (portrait phones, 480px and down) */
@media only screen and (max-width: 480px) {

    .blog-container {
      grid-template-columns: repeat(1, 1fr); 
      gap: 1rem;
      margin: 1rem;
    }
}