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

}

.site-header{
    background-color: #fafafa;
}

.latest-inner a:hover,.view-more a:focus, .view-more a:hover{
    cursor: pointer;
    color: #575353;
}

/*Latest blog*/
.latest {
    margin-top: 0.5em;
    grid-area: last;
    background-color: black;
    background-image: url("../images/food-section-hero.png");
    background-size: cover;
    background-position: center;

   
    /*text-shadow: 0 0 1px black;*/
    min-height: 700px;

    display: grid;
    grid-template-columns:  0.5em 1fr 0.5em ;
    grid-template-areas:
        "... latest_inner ..."
        ;
}

.latest-inner{
    grid-area: latest_inner;
    width: 100%;
    padding: 4em 0;

    display: flex;
    flex-direction: column;
    justify-content: end;

    
}

.latest-inner a{
    text-decoration: none;
}

.latest-inner time, .latest-inner h1, .latest-inner div{
    background-color: rgba(255, 255, 255, 0.8); /* Light background with transparency */
    padding: 10px;

    border-radius: 5px; /* Optional: rounded corners */
}

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

.post {
    padding: 1.5em 0;

    display: grid;
    gap: 1em;  
    /*grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))*/
    grid-template-columns: 1fr;
    
}

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

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

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

.article-title {
    font-size: 1.5rem;
    margin: 0.5em 0 0.35em 0;
}

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

p {
    line-height: 1.3;
}

.view-more{
    text-align: center;
    font-weight: bold;
    margin-bottom: 1.5em;
}

.view-more a{
    color: #151515;
}
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 last last last last"
        "... cont cont cont cont cont cont cont cont cont cont ..."
        "foot foot foot foot foot foot foot foot foot foot foot foot"
        ;
        
    }

    .latest{
        width: 100%;
        grid-template-columns:  repeat(12, 1fr) ;
        grid-template-areas:
        "... latest_inner latest_inner latest_inner latest_inner latest_inner latest_inner latest_inner latest_inner latest_inner latest_inner ..."
        ;
    }

    .post {
        grid-template-columns: repeat(3, 1fr);
    }
}