#hero {
    background: var(--surface-color);

    & .primary_navigation {
        padding-block: 1.5rem;

        & ul {
            & li:first-child a,
            & li:last-child a {
                display: block;
                font: var(--paragraph);
            }

            & li:not(:last-child) a {
                padding: .25rem;
            }

            & li:first-child:hover a svg path,
            & li:first-child:focus-within a svg path {
                fill: #EF5F4C;
            }

            & li:not(:first-child):not(:last-child):hover a,
            & li:not(:first-child):not(:last-child):focus-within a {
                color: var(--brand-color);
                text-decoration: underline;
            }
        }
    }

    & .profile {
        padding-block: 2rem;

        & .about {
            max-width: 37rem;

            gap: 2rem;

            & > img {
                width: 11rem;
                height: 11rem;
            }

            & > div {
                & h1 {
                    font: var(--heading1);
                    color: var(--text-color-primary);

                    margin-bottom: .5rem;
                }
            }
        }

        & .stats {
            width: 17.5rem;

            & li {
                gap: .5rem;
            }
        }
    }

    @media (width < 40rem) {
        .primary_navigation {
            padding-block: 1rem;
        }

        .profile .about {
            flex-direction: column;
            gap: 1rem;

            & > div > h1 {
                font-size: 1.5rem;
            }
        }
    }
}