.site-header {
    padding-top: var(--space-large);
    padding-bottom: var(--space-large);
    background-color: white; /*#f9faf4*/
}

.navigation {
    height: 80px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;


    display: grid;
    gap: var(--space-large);
    grid-template-columns: repeat(12, 1fr);
}

.navigation__brand {
    grid-column: span 2;
    height: 80px;
    order: 2;
}

.navigation__logo {
    max-height: 80px;
    width: auto;
}

.navigation__items {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    height: 80px;
    order: 1;
    grid-column: span 5;
}

.navigation__item--active {
    text-decoration: underline;
}

.navigation__link {
    text-decoration: none;
    color: var(--base-link-color);
}

.navigation__link:hover {
    text-decoration: underline;
}

.navigation__call-to-action {
    justify-content: center;
    background-color: #0e6559;
    align-items: center;
    text-decoration: none;
    border-radius: 2em;
    color: white;
    display: flex;
    height: 2.5em;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    order: 3;
    grid-column: 11 / -1;
}