:root {
    --purplegrey: #f1ebf7;
}

/* Blog Hero*/
#blog-hero {
    min-height: 600px;
    display: flex;
    background: linear-gradient(180deg, rgba(241,235,247,0.66) 90%, var(--purplegrey) 100%), url("../images/blog/blog-bg.jpg");
    background-blend-mode: normal;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media(max-width: 768px) {
    #blog-hero {
        height: 450px;
    }
}

#posts-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.post{
    width:30%;
}

.post-content{
    padding: 20px 0px;
    position: relative;
    top: -30px;
    background-color: var(--purplegrey);
    width: 80%;
}

.post-meta {
    font-family: "Afacad";
    font-size: 0.9em;
}

@media (max-width: 768px){
    .post {
        width: 48%;
    }
}

@media (max-width: 576px){
    #posts-container {
        justify-content: center;
    }

    .post {
        width: 80%;
    }
}