#hero {
    margin: 0 1.5em 0 1.5em;
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: auto 1fr;
    grid-template-areas: 
        "logo image"
        "desc image";
    gap: 1em;
    justify-items: start;
    align-items: center;
    color: white;
}

#logo { 
    grid-area: logo;
    align-self: end;
}

#hero > ul {
    grid-area: desc;
    font-size: 1.5em;
    font-style: italic;
    margin-top: 0;
    padding-left: 1em;
}

#hero-image {
    grid-area: image;
    justify-self: center;
    width: 15em;
    aspect-ratio: initial;
}

.rounded-hero-image {
    border-radius: 1em;
}

/*
Hide the top header on a project page because we already have the logo.
However, the heading is good for distribution and needed for accessibility.
*/
h1 { display: none; }

@media only screen and (max-width: 720px) {
    #hero {
        grid-template-rows: auto auto auto;
        grid-template-columns: auto;
        grid-template-areas:
            "image"
            "logo"
            "desc";
        justify-items: center;
    }
}