#site-header {
    align-items: center;
    column-gap: 1.5rem;
}

#site-header .site-branding {
    flex: 0 1 27.5rem;
    min-width: 0;
}

#site-header .custom-logo-link {
    display: block;
    max-width: 27.5rem;
}

#site-header .site-logo img {
    display: block;
    width: 27.5rem;
    max-width: 100%;
    height: auto;
}

#site-header .site-navigation {
    margin-inline-start: auto;
}

@media (max-width: 767px) {
    #site-header .site-branding {
        flex-basis: 8rem;
    }

    #site-header .custom-logo-link,
    #site-header .site-logo img {
        max-width: 8rem;
    }
}