body {
    grid-template-rows: 4.5rem auto auto 1fr 1fr;
    grid-template-areas:
        "nav nav nav"
        "header header header"
        "content content content"
        "recent recent recent"
        "footer footer footer";
    gap: 2em;
    color: #282828
}

header,
main,
section {
    padding: 0 calc(4vw - .8em);
}

.about-me--summary,
.about-me--content {
    margin: 0 auto;
    max-width: 100ch;
}

/* GRID AREAS */
.navbar {
    grid-area: nav
}

.about-me--summary {
    grid-area: header
}

.about-me--content {
    grid-area: content
}

.recent-posts-wrapper {
    grid-area: recent
}

footer {
    grid-area: footer;
}

/* HEADER */

.about-me--summary,
.about-me--summary_text {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.about-me--summary {
    align-items: center;
    justify-content: start;
}

.about-me--summary img {
    grid-area: icon;
    max-width: clamp(10em, 25vw, 15em);
    border-radius: 50%;
}

.about-me--summary h1 {
    grid-area: title;
}

.about-me--summary p {
    grid-area: subtext;
}

/* CONTENT */

.about-me--content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: .5em;
}

.about-me--content h2:not(:first-child) {
    margin-top: 1.25em;
}

/* MEDIA QUERIES */

@media (min-width: 700px) {
    .about-me--summary {
        flex-direction: row;
    }
}