.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    inline-size: var(--w-content);
    max-inline-size: var(--mw-2xl);
    margin-inline: auto;
}

.brand-container a {
    block-size: 2.75rem;
    display: flex;
    transition: block-size 0.3s;
    align-items: center;
    gap: 4.25%;
    color: currentColor;
}

.brand-container a>svg {
    block-size: 100%;
}

.brand-container a>svg:first-of-type {
    fill: var(--c-ao-6);
}

.brand-container a>svg:nth-of-type(2) {
    fill: currentColor;
    block-size: 66.67%;
}

#hd {
    background: var(--c-sheet);
    padding-block: var(--s-sm);
    transition: padding 0.3s;
    container-type: inline-size;
    container-name: header;
    z-index: 692401;
    position: sticky;
    top: 0;
}

#hd.enabled {
    z-index: 692401;
    position: sticky;
    top: 0;
    padding-block: var(--s-2xs);
}

#hd.enabled .brand-container a {
    block-size: 1.875rem;
}

@container header (max-width: 36rem) {

    .brand-container a {
        block-size: 3rem;
    }

    #hd.enabled .brand-container a {
        block-size: 2.75rem;
    }
}