@layer page {
    body > main {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size--2);
        max-width: var(--reponsive-index-max-width);
        margin: auto;
        padding: var(--size--1);
        img {
            display: unset;
        }

        #top-container {
            display: flex;
            flex-wrap: wrap;
            gap: var(--size--4);
            align-items: center;
            padding: var(--size--1) 0;
            max-width: 100%;
            section#myself {
                flex: 1 1 20%;
                max-width: min(90dvw, 15rem);
                position: relative;
                margin: auto;
                h1 {
                    max-width: 100%;
                    text-align: center;
                    margin-top: var(--size--1);
                    font-family: Cursive;
                }
                img {
                    max-width: calc(100% - 8px);
                    border-radius: 50%;
                    border: 4px solid currentColor;
                    margin: 4px auto;
                }
                &::after {
                    content: " ";
                    position: absolute;
                    inset: 0px;
                    aspect-ratio: 1 / 1;
                    border: 2px solid currentColor;
                    border-top: 0;
                    border-left: 0;
                    border-radius: 50%;
                }
            }
            section#last-post {
                flex: 1 1 40%;
                min-width: min(100%, 600px);
                @media screen and (width > 700px) {
                    a.post-card {
                        article {
                            grid-template:
                            "cover header" min-content
                            "cover main" 1fr
                            "cover footer" min-content
                            / 50% 1fr;
                            height: 100%;
                            img {
                            height: 100%;
                            max-height: 100%;
                            width: 100%;
                            aspect-ratio: 5/4;
                            object-fit: cover;
                            }
                        }
                        &:hover {
                            img {
                                border-top-right-radius: 0;
                                border-bottom-left-radius: var(--size--1);
                            }
                        }
                    }
                }
            }
        }
        section#previous-posts {
            flex: 1 1 100%;
            display: flex;
            flex-wrap: wrap;
            gap: var(--size--2);
            align-items: stretch;

            a.post-card {
                @media screen and (width >= 700px) {
                    &:nth-child(1),
                    &:nth-child(2),
                    &:nth-child(6),
                    &:nth-child(7) {
                    flex: 1 1 40%;
                    }
                    &:nth-child(3),
                    &:nth-child(4),
                    &:nth-child(5),
                    &:nth-child(8),
                    &:nth-child(9),
                    &:nth-child(10) {
                    flex: 1 1 30%;
                    }
                }
                @media screen and (width < 700px) {
                    flex: 1 1 100%;
                }
            }
        }

        a.post-card {
            --article-card--border-color: light-dark(
                var(--color--light-gray),
                var(--color--dark-gray)
            );
            max-width: var(--reponsive-index-max-width);
            text-decoration: none;
            cursor: pointer;
            article {
                display: grid;
                border: 1px solid var(--color--bg);
                height: 100%;
                grid-template:
                    "cover" min-content
                    "header" min-content
                    "main" min-content
                    "footer" 1fr
                    / 1fr;
                &:hover {
                    border: 1px solid var(--article-card--border-color);
                    border-radius: var(--size--1);
                    img {
                        border-top-left-radius: var(--size--1);
                        border-top-right-radius: var(--size--1);
                    }
                }
                img {
                    grid-area: cover;
                    width: 100%;
                    max-height: 10rem;
                    object-fit: cover;
                }
                & > :not(img) {
                    padding: 0 var(--size--1) var(--size--1) var(--size--1);
                }
                header {
                    grid-area: header;
                }
                main {
                    grid-area: main;

                    :first-child {
                        margin-top: 0;
                    }
                }
                footer {
                    grid-area: footer;
                    section {
                        display: flex;
                        flex-wrap: wrap;
                        gap: var(--size--half) var(--size--4);
                        & > * {
                            text-wrap: nowrap;
                        }
                    }
                }
            }
        }

        section#archives {
            ul {
                list-style-type: none;
                display: flex;
                flex-direction: row-reverse;
                flex-wrap: wrap-reverse;
                gap: var(--size--2);
                justify-content: center;
                padding: 0;
            }
        }
    }
}