@media (min-width: 1025px) {
    .header {
        position: fixed;
        top: var(--gap-positive-600);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: var(--gap-positive-4000);
        align-items: center;
        z-index: 1;
        transition: 500ms linear;

        .header__logo-container {
            width: 72px;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--shape-medium);
            background-color: var(--theme-surface-tint-1);
            box-shadow: var(--elevation-low);
        }

        .header__logo {
            width: var(--icon-size-large);
            height: var(--icon-size-large);
        }

        .header__navigation-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--gap-positive-300) var(--gap-positive-400);
            border-radius: var(--shape-medium);
            background-color: var(--theme-surface-tint-1);
            box-shadow: var(--elevation-low);

            .navigation-bar__items {
                display: flex;
                gap: var(--gap-positive-400);
                align-items: center;
                justify-content: center;
            }
        }

        .header__open-drawer-menu-button {
            display: none;
        }
    }

    .header--hidden {
        opacity: 10%;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .header {
        position: fixed;
        top: var(--gap-positive-600);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: var(--gap-positive-1600);
        align-items: center;
        z-index: 1;
        transition: 500ms linear;

        .header__logo-container {
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--shape-medium);
            background-color: var(--theme-surface-tint-1);
            box-shadow: var(--elevation-low);
        }

        .header__logo {
            width: var(--icon-size-medium);
            height: var(--icon-size-medium);
        }

        .header__navigation-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--gap-positive-300) var(--gap-positive-400);
            border-radius: var(--shape-medium);
            background-color: var(--theme-surface-tint-1);
            box-shadow: var(--elevation-low);

            .navigation-bar__items {
                display: flex;
                gap: var(--gap-positive-400);
                align-items: center;
                justify-content: center;
            }
        }

        .header__open-drawer-menu-button {
            display: none;
        }
    }

    .header--hidden {
        opacity: 10%;
    }
}

@media (max-width: 640px) {
    .header {
        box-sizing: border-box;
        position: fixed;
        top: var(--gap-positive-600);
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--gap-positive-600);
        z-index: 1;
        transition: 500ms linear;

        .header__logo-container {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--shape-small);
            background-color: var(--theme-surface-tint-1);
            box-shadow: var(--elevation-low);
        }

        .header__logo {
            width: var(--icon-size-small);
            height: var(--icon-size-small);
        }

        .header__navigation-bar {
            display: none;
        }

        .header__open-drawer-menu-button {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--shape-small);
            background-color: var(--theme-surface-tint-1);
            box-shadow: var(--elevation-low);

            img {
                width: var(--icon-size-medium);
                height: var(--icon-size-medium);
            }
        }
    }

    .header--hidden {
        opacity: 10%;
    }
}