:root {
    --f10: clamp(1rem, 1rem + (100vw - var(--margin) * 2 - 8rem) / 120, 1rem);
    --f12: clamp(1rem, 1rem + (100vw - var(--margin) * 2 - 8rem) / 120, 1.2rem);
    --f14: clamp(1rem, 1rem + (100vw - var(--margin) * 2 - 8rem) / 48, 1.4rem);
    --f16: clamp(1rem, 1rem + (100vw - var(--margin) * 2 - 8rem) / 32, 1.8rem);
    --f20: clamp(1rem, 1rem + (100vw - var(--margin) * 2 - 8rem) / 24, 2rem);
    --f30: clamp(1rem, 1rem + (100vw - var(--margin) * 2 - 8rem) / 12, 3rem);
    --f40: clamp(1rem, 1rem + (100vw - var(--margin) * 2 - 8rem) / 8, 3rem);
    --margin: 2rem;
}

body {
    width: 100%;
    color: #333;
    background: #f8f8f8;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
        sans-serif;
    font-size: var(--f12);
    margin: 0;
    display: grid;
    grid-template-columns: 1fr minmax(0, 44rem) minmax(0, 16rem) 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "header header header header"
        ". main aside .";
    align-items: start;
}

header {
    grid-area: header;
    padding: 5rem 0;
    text-align: center;
    background: #684988;
    color: white;
    display: grid;
    grid-template-columns:
        20vw
        minmax(0, 44rem)
        minmax(0, 16rem)
        20vw;
    grid-template-rows: min-content min-content;
    grid-template-areas:
        ". title photo ."
        ". subtitle photo .";
    column-gap: 2rem;
    row-gap: 1rem;
}

.title {
    grid-area: title;
    align-self: flex-end;
    font-size: var(--f30);
}

.subtitle {
    grid-area: subtitle;
    line-height: 1.9rem;
    align-self: flex-start;
    margin: 0;
    font-size: var(--f20);
}

.photo {
    max-width: 24rem;
    width: 100%;
    grid-area: photo;
    border: 7px solid white;
    border-radius: 50%;
    aspect-ratio: 1/1;
    overflow: hidden;
    justify-self: center;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-title {
    margin: 0;
}

.post-header {
    margin-bottom: 1rem;
}

.icons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
}

.icons li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid black;
    border-radius: 50%;
    color: black;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s;
}

.icons li a:hover {
    background: black;
    color: white;
}

main {
    grid-area: main;
    padding-top: 3rem;
    padding-right: 2rem;
    display: flex;
    flex-direction: column;
    row-gap: 8rem;
}

aside {
    grid-area: aside;
    padding-top: 3rem;
}

.post-subtitle {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: var(--f12);
}

article img {
    max-width: 90%;
    max-height: 40vh;
    width: auto;
    height: auto;
    display: block;
    margin: 1.5rem auto;
}

article p:has(> img:only-child) {
    margin: 0;
}

header .title a {
    color: inherit;
    text-decoration: none;
}

header .title a:hover {
    text-decoration: underline;
}

@media (max-width: 1280px) {
    body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "aside"
            "main";
    }

    header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "photo"
            "subtitle";
        padding: 2rem 1rem;
    }

    .photo {
        justify-self: center;
        width: 60%;
        max-width: 16rem;
    }

    main {
        padding: 2rem 1rem;
        row-gap: 3rem;
    }

    aside {
        padding: 2rem 1rem 0;
    }
}