.mainbody {
    max-width: 1200px;
    margin: auto;
}

header {
    display: grid;
    grid-template-columns: 420px auto;
    grid-template-rows: auto auto;
}

footer {
    text-align: center;
}

.pic {
    margin-right: 1em;
    grid-column: 1;
    grid-row: 1 / span 2;
}


.heading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: darkgreen;
    grid-column: 2;
}

.detail {
    grid-row: 2;
    grid-column: 2;
}

@media all and ( max-width: 750px ) {
    header {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
    }

    .heading {
        grid-column: 1;
        grid-row: 2;
    }

    .detail {
        grid-column: 1;
        grid-row: 3;
    }

    .pic {
        margin-right: 1em;
        grid-column: 1;
        grid-row: 1;
    }
}

@media all and ( max-width: 1024px ) {
    header {
        grid-template-rows: auto auto auto;
    }

    .detail {
        grid-column: 1 / 3;
        grid-row: 3;
    }
}

/*
    Flex version
header {
    display: flex;
    flex-direction: row;

}

.pic {
    margin-right: 1em;
}


.heading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: darkgreen;
    width: 80em;
}


@media all and ( max-width: 750px ) {
    header { 
        flex-direction: column;
    }
    .heading {
        width: 100%;
    }
}

@media all and ( max-width: 1024px ) {
    .detail {
    }
}

    */