.t-Header-branding {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "controls logo navbar";
    align-items: center;
    gap: var(--ut-header-item-spacing, 0.5rem);
    -webkit-padding-before: var(--ut-header-padding-y, var(--ut-header-item-spacing, 0.5rem));
    padding-block-start: var(--ut-header-padding-y, var(--ut-header-item-spacing, 0.5rem));
    -webkit-padding-after: calc(var(--ut-header-padding-y, var(--ut-header-item-spacing, 0.5rem)) - var(--ut-header-border-width, 1px));
    padding-block-end: calc(var(--ut-header-padding-y, var(--ut-header-item-spacing, 0.5rem)) - var(--ut-header-border-width, 1px));
    -webkit-padding-start: var(--ut-header-padding-x, var(--ut-header-item-spacing, 0.5rem));
    padding-inline-start: var(--ut-header-padding-x, var(--ut-header-item-spacing, 0.5rem));
    -webkit-padding-end: var(--ut-header-padding-x, var(--ut-header-item-spacing, 0.5rem));
    padding-inline-end: var(--ut-header-padding-x, var(--ut-header-item-spacing, 0.5rem));
    background-color: var(--ut-header-background-color);
    box-shadow: var(--ut-header-box-shadow);
    color: var(--ut-header-text-color);
    min-height: var(--ut-header-height);
    border-bottom-width: var(--ut-header-border-width, 1px);
    border-bottom-style: solid;
    border-bottom-color: var(--ut-header-border-color);
}

.t-Header-logo {
    grid-area: logo;
    font-size: var(--ut-logo-font-size, 1.125rem);
    line-height: var(--ut-logo-line-height, 1.5rem);
    font-weight: var(--ut-logo-font-weight, var(--a-base-font-weight-semibold, 500));
    display: flex;
    min-width: 0;
    align-items: center;
    margin: 5px auto;
}