body {
    grid-template-columns: 0.5em 1fr 0.5em;
    grid-template-areas: 
    ".... head ...."
    ".... last ...."
    ".... bimg ...."
    ".... cont ...."
    ".... rcnt ...."
    ".... foot ...."
    ;

}


/*Latest blog*/
.latest {
    margin-top: 0.5em;
    grid-area: last;

}

.latest time{
    display: inline-block;
    margin-top: 3em;
}

.blog-img{
    grid-area: bimg;
}

.blog-img img{
    width: 100%;
    border-radius: 5px;
    margin-top: 1.5em;
}

.bold-text{
    font-weight: bold;
}

.container {
    grid-area: cont;
    width: 100%;
    margin: 0 auto;
}

.recent{
    grid-area: rcnt;
}

.recent h2{
    margin-top: 1em;
    text-align: center;
}

.recent-list{
    display: grid;
    grid-template-columns: 1fr;
}

article img {
    width: 100%;
    border-radius: 5px;
}

.article-info {
    text-transform: uppercase;
}

.article-img {
    margin-bottom: 1em;
}

.recent-list .article-title {
    font-size: 1.5rem;
    margin: 0.5em 0 0.35em 0;
    text-align: left;
}

.article-preview {
    margin-top: 0;
}

p {
    line-height: 1.3;
}



footer {
    grid-area: foot;
    background-color: #202020;
    color: white;
    text-align: center;
    padding: 3em;
}

.learning-journal{
    font-weight: bold;
    text-transform: capitalize;
}

footer a{
    color: azure;
}

footer a:hover, footer a:focus{
    color: white;
}

@media (min-width: 1024px) {
    body {
        
        grid-template-columns:  repeat(12, 1fr) ;
        grid-template-areas: 
        "head head head head head head head head head head head head"
        "... ... last last last last last last last last ... ..."
        "... bimg bimg bimg bimg bimg bimg bimg bimg bimg bimg ..."
        "... ... cont cont cont cont cont cont cont cont ... ..."
        "... rcnt rcnt rcnt rcnt rcnt rcnt rcnt rcnt rcnt rcnt ..."
        "foot foot foot foot foot foot foot foot foot foot foot foot"
        ;
    }

    article {
        width: 95%;
    }

    .recent-list{
        grid-template-columns: 1fr 1fr 1fr;
    }

}