body>header {
    display: flex;

    flex-wrap: wrap;
    gap: var(--space-s-m);
    padding-block: var(--space-s-m);
    padding-inline: var(--padding-inline-l);

    font-weight: 400;
    font-family: var(--ff-heading);
    font-size: var(--fs-300);

    background: var(--clr-base);
    position: sticky;
    top: 0;
    z-index: 2;

    &>* {
        --clr-bg-parent: var(--clr-base);
    }

    & a {
        color: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;

        &:hover,
        &:focus,
        &:focus-visible {
            color: var(--clr-gold);
        }
    }

    & #left {
        display: flex;
        flex: 1;

        gap: var(--space-xs-s);
        align-items: center;
        justify-content: space-between;

        & .icon {
            height: 100%;
            width: unset;
            aspect-ratio: 1;
            transition: scale var(--animate-t) var(--animate-f);
        }
    }

    & nav {
        display: flex;
        gap: var(--space-s-l);
        flex: 2;
        justify-content: flex-end;
        align-items: center;

        & li {
            display: flex;
            align-items: center;
            justify-content: center;
            list-style: none;

            & a {
                border-radius: var(--space-3xs);

                &:hover,
                &:focus,
                &:focus-visible {
                    & .icon {
                        scale: 0.7;
                    }
                }
            }
        }
    }
}
