body{
    color: #0B3D2E;
    background-color: #F5F5DC;
    font-family: 'Inter', sans-serif;
    font-size: calc(10px + 1vw);
}

.grid-container p{
    text-align: center;
}

#leaf_text{
    width: 17.5em;
    grid-area: leaf_text;
    text-align: justify;
}

#root_text{
    width: 17.5em;
    grid-area: root_text;
    text-align: justify;
}

#garden_text{
    /* width: 38em; */
    grid-area: garden_text;
    width: calc(((100vw - 38em) / 2) + 38em);
}

#leaf_image{
    grid-area: leaf_image;
    text-align: right;
}

#root_image{
    grid-area: root_image;
    text-align: left;
}

#garden_image{
    grid-area: garden_image;
    text-align: center;
    width: calc(((100vw - 38em) / 2) + 38em);
}

/* #garden_image > img{
    object-fit: cover;
} */

.grid-container{
    display: grid;
    grid-template-areas: 
    "leaf_image leaf_text" 
    "root_text root_image"
    "garden_image garden_image"
    "garden_text garden_text";
    align-items: center;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
}

@media only screen and (max-width: 768px) { 
    .grid-container{
        grid-template-areas: 
        "leaf_image"
        "leaf_text"
        "root_image" 
        "root_text"
        "garden_image"
        "garden_image"
        "garden_text"
        "garden_text"!important;
        grid-template-columns: 1fr!important;
        gap: 3em;
    }
    #garden_image{
        width:17.5em!important;
    }
    #garden_text{
        width:17.5em!important;
    }
}