body:has(.subpage) .gnav__link {
    color: var(--color-text-black);
}

.header .header__logo svg .cls-1 {
    fill: #170305;
}

.header .header__logo svg .cls-2 {
    fill: #004089;
}

.header .header__logo svg .cls-3 {
    fill: #241613;
}

.header .header__logo svg .cls-4 {
    fill: #008ed2;
}

.subpage {
    /* padding-bottom: var(--spacing-4xl); */
}

/*
 * Usage: <h1 class="subpage__title"><span>Page Title</span></h1>
 */
:where(.subpage__title) {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--color-primary-dark) 83%, transparent) 0%,
        color-mix(in srgb, var(--color-primary-dark) 100%, transparent) 0%,
        var(--color-primary) 60%,
        color-mix(in srgb, var(--color-primary) 10%, #fff) 100%
    );
    color: var(--color-text-white);
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 200;
    padding-block: 45px;
}

.subpage__title--green {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--color-green) 83%, transparent) 0%,
        color-mix(in srgb, var(--color-green) 100%, transparent) 0%,
        var(--color-primary-green) 60%,
        color-mix(in srgb, var(--color-green) 10%, #fff) 100%
    );
}

.subpage__title span {
    display: flex;
    margin-inline: auto;
    max-width: 1080px;
    padding-inline: 20px;
}

@media (max-width: 768px) {
    .subpage__title {
        font-size: 20px;
        padding-block: 32px;
    }
}