.branding.logo > .content,
.branding-logo {
    width: 100%;
    height: 100%;
}

.branding.logo {
    background-color: inherit;
}

.branding.logo > .content {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-small);
    overflow: hidden;
}

.branding-logo-link {
    display: block;
    height: 100%;
}

.branding-logo:hover {
    opacity: 0.8;
}

.main-header-branding {
    gap: var(--spacing-small);
    display: flex;
    align-items: center;
}

.main-header-branding-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.main-header-branding-logo {
    height: var(--header-branding-logo-height);
    width: auto;
    display: block;
    max-width: 100%;
}

.main-header-branding-logo:hover {
    opacity: 0.8;
}