.page-header {
    --header-inner-width: 95%;
    --header-bg-color: var(--color-surface);
    --header-inner-bg-color: var(--header-bg-color);
    --header-inner-border-radius: 0 0 1.25rem 1.25rem;
    --header-logo-width: 13.75rem;
    --header-navigation-bg-color: transparent;

    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(0, 0, 0, 6%);
    background-color: var(--header-bg-color);
}

.page-header.page-header--sticky {
    position: fixed; 
    z-index: var(--under-top-z-index);
    backdrop-filter: blur(4px);
}

.page-header__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 3.75rem;
    row-gap: 1.25rem;
    width: var(--header-inner-width);
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-radius: var(--header-inner-border-radius);
    background-color: var(--header-inner-bg-color);
}

.page-header__link {
    width: min(var(--header-logo-width), 100%);
    transition: filter .6s;
}

.page-header__link:hover {
    filter: brightness(90%);
}

.page-header__logo {
    object-fit: contain;
}

    /* ========================================
                    Header->
                    Navigation
                    [START]
    ========================================= */

    .page-header__nav {
        position: static;
        display: block;
        flex-grow: 1;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        background-color: var(--header-navigation-bg-color);
    }

    .page-header__navigation-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        column-gap: 1.5rem;
        row-gap: 1rem;
        width: auto;
        min-height: auto;
        margin: 0;
        padding: 0;
    }