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

}

.intro{
    grid-area: intr;
    margin-top: 3em;
}

.info{
    grid-area: info;
}

.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"
        "... intr intr intr intr intr intr intr intr intr intr ..."
        "... ... info info info info info info info info ... ..."
        "... ... 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;
    }

    .intro{
        display: flex;
        justify-content: space-between;
    }

    .intro div {
        width: 80%;
    }

    .info h2:first-child{
        margin-top: 3em;
    }

}