/* TABLET LAYOUT */
@media (min-width: 55rem){

    /* page layout */
    #content{
        grid-template-columns: 25% auto 300px;
        grid-template-rows: minmax(3.75rem, auto) minmax(15rem, 1fr);
        grid-template-areas:
            "content-left content-top content-top"
            "content-left content-center content-right";
    }
    #content-top       {grid-area: content-top;}
    #content-left      {grid-area: content-left;}
    #content-center    {grid-area: content-center;}
    #content-right     {grid-area: content-right;}
}