body{
    background-color: var(--background-color);
    color: var(--text-color);
}

.heading > p.bio {
    text-align: center;
    font-size: 18px;
}

.featured-posts h1 {
    text-align: center;
}

.featured-posts > div {
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    align-items: start;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 1em;
    justify-content: center;
    width: 100%;
}

  
.featured-posts > a {
    margin: 35px auto;
    text-align: center;
    display: block;
    color: var(--link-color);
    -webkit-transition: font-size 0.6s, color 0.6s;
    -moz-transition: font-size 0.6s, color 0.6s;
    -o-transition: font-size 0.6s, color 0.6s;
    transition: font-size 0.6s, color 0.6s;
}

.featured-posts > a:hover {
    font-size: 17px;
    color: var(--link-color-hover);
}

.featured-posts > div p {
    color: var(--text-color);
}

.post {
    flex: 0 1 calc(33% - 20px);
    cursor: pointer; 
    display: block;
    -webkit-transition: transform 0.6s;
    -moz-transition: transform 0.6s;
    -o-transition: transform 0.6s;
    transition: transform 0.6s;
}

.post:hover{
    transform: scale(1.02);
}

.post img {
    border-radius: 8px;
    height: auto;
    width: 100%;
}

.post h3 {
    padding: 0;
    margin: 0;
    color: var(--heading-color);
}

.post p {
    padding: 0;
    margin: 0;
    width: 100%;
}

 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
    .featured-posts > div {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
    .featured-posts > div {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .featured-posts {
        margin-top: 50px;
    }

 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
    .featured-posts, .heading {
        margin-top: 75px;
    }
    
    .featured-posts > div {
        flex-direction: row;
        align-items: start;
        justify-content: center;
    }
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
  
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
  
 }