main {
    display: grid;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    grid-template-columns: auto 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        ".        title    title    title   "
        "headshot text     text     text    "
        "links    cards    cards    cards   ";

    /* Align items to top left */
    place-content: start;
}

@media only screen and (max-width: 670px) {
    main {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
        ".        title    title   "
        "headshot text     text    "
        "links    text     text    "
        "cards    cards    cards   ";
    }

    #headshot {
        width: 100%;
    }
}

@media only screen and (max-width: 500px) {
    main {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "title    title  "
        "headshot links  "
        "text     text   "
        "cards    cards  ";
    }

    #headshot {
        width: 100%;
    }

    #links {
        justify-self: start;
        text-align: left;
    }
}

#headshot {
    box-sizing: border-box;
    grid-area: headshot;
    justify-self: end;
    position: relative;
    top: 0.25em;
}

#title {
    grid-area: title;
}

#research_description {
    grid-area: text;
}

#links {
    grid-area: links;
    justify-self: end;
    text-align: right;
    width: 150px;
}

#email {
    text-align: justify;
    font-size: 10pt;
    line-height: 10pt;
    font-family: monospace;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
}