.container {
    grid-template-areas: 
        "h h h h h h h h h h h h h h"
        ". m m m m c c c c c c c c ."
        "f f f f f f f f f f f f f f";
}

@media screen and (max-width: 768px) and (min-width: 641px) {
    .menu, .header, .footer {
        font-size: .6em;
    }
    .homeBlurb, .homeBlurb2, .homeBlurb3 {
        font-size: clamp(0.8rem, 3vw, 1rem) !important;
    }
}

@media screen and (max-width: 640px) {  
    html, body {
        height: auto !important;
        overflow: auto !important;
        font-size: 1em !important;
    }
    .container {  
        grid-template-areas: 
            "h h h h h h h h h h h h h h"
            "m m m m m m m m m m m m m m"
            "c c c c c c c c c c c c c c"
            "f f f f f f f f f f f f f f";
        grid-template-rows: auto auto auto auto;
        height: auto !important;
        padding-bottom: 0 !important;
    }
    .menu {
        height: auto !important;
        max-height: 35vh !important;
        overflow-y: auto !important;
        font-size: 0.65em !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-areas:
            "mE1   mGG   mH1"
            "mA    mA    mBa"
            "mBb1  mBb2  mBb3"
            "mC1   mC2   mC3"
            "mC4   mC5   mD1"
            "mD2   mD3   mD3"
            "mF1   mF2   mF3"
            "mG1   mG2   mG3"
            "mI1   mI2   mI2" !important;
    }
    .menu .button {
        font-size: clamp(0.5rem, 2vw, 0.7rem) !important;
    }
    .header {
        font-size: 0.65em !important;
    }
    .homeBlurb, .homeBlurb2, .homeBlurb3 {
        font-size: clamp(0.85rem, 3vw, 1rem) !important;
    }
    .footer {
        position: static !important;
        width: 100% !important;
        font-size: 0.6em !important;
    }
    .content {
        height: auto !important;
        overflow-y: visible !important;
        min-height: 40vh;
    }
}