html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

/*POST LIST CONTENT*/

.blog-content{
    display: grid;
    grid-template-areas:
        'header  header header'
        'posts  posts newsletter'
        'posts  posts donate';
    grid-gap: 19px;
    max-width: 1200px;
    margin: 0 auto;
}


.blog-conten > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }

.grid-header{
    grid-area: header;
}

.grid-newsletter{
    grid-area: newsletter;
}

.grid-posts{
    grid-area: posts;
    max-width: 900px;
    margin-top: 80px;
}

.grid-donate{
    grid-area: donate;
}

/*POST PREVIEW CONTENT*/

.post-preview{
    display: grid;
    grid-template-areas:
        'image title    title     title '
        'image abstract abstract  abstract'
        'image author   category  date';
    align-content: center;
    justify-content: start;
    align-items: center;
    grid-gap: 10px;
}

.post-preview > div > a {
    text-decoration:none;
}


.post-preview-image{
    grid-area: image;
    height: 100%;
    max-height: 200px;
    object-fit: cover;
    border-left: 7px solid black;
}

.post-preview-title{
    grid-area: title;
    /* width: calc(60vw); */
    padding: 0px 10px;
    margin: 0px;
}

.post-preview-abstract{
    grid-area: abstract;
    padding: 0px 10px;
    margin: 0px;
    color: #383558c2;
}

.post-preview-author{
    grid-area: author;
    width: 100%;
    padding: 10px;
    text-align: left;
}

.post-preview-category{
    grid-area: category;
    width: 100%;
    text-align: center;
}
.post-preview-date{
    grid-area: date;
    width: 100%;
    padding: 10px;
    text-align: right;
}

@media only screen and (max-width: 650px) {

    .blog-content {
        grid-template-areas:
        'header '
        'posts'
        'donate'
        'newsletter'
        ;
    }

    .post-preview{
        grid-template-areas:
        'image image image'
        'title title title'
        'abstract abstract abstract '
        'author   category  date'
        ;
    }

    .post-preview-title{
        width: calc(100vw);
    }

    .post-preview-image{
        width: calc(100vw);
    }
}