.tile__banner {
    display: none;
    width: 100%;
    color: var(--banner-color-text);
    background-color: var(
        --banner-color-background,
        var(--tile-color-primary-100)
    );
    @media (min-width: 960px) {
        display: block;
    }
}

.tile__banner__wrapper {
    max-width: var(--tile-max-w-7xl);
    margin-inline: auto;
    padding-inline: calc(var(--tile-spacing) * 4);
    padding-block: calc(var(--tile-spacing) * 2);
    @media (min-width: 960px) {
        padding-inline: calc(var(--tile-spacing) * 8);
    }
}

.tile__header {
    --tile-header-color-border: var(--header-color-border, #00000022);
    position: sticky;
    top: 0;
    height: calc(var(--tile-spacing) * 13.5);
    color: var(--header-color-text);
    width: 100%;
    border-block: 1px solid var(--tile-header-color-border);
    background-color: var(
        --header-color-background,
        var(--tile-color-primary-50)
    );

    z-index: 10;
    @media (min-width: 960px) {
        height: calc(var(--tile-spacing) * 16.5);
    }
}

.tile__header--open {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    @media (min-width: 960px) {
        position: sticky;
    }
    .tile__header__wrapper {
        flex-direction: column;
        padding-block: calc(var(--tile-spacing) * 24);
        gap: calc(var(--tile-spacing) * 4);
        @media (min-width: 960px) {
            padding-block: calc(var(--tile-spacing) * 2);
            flex-direction: row;
            justify-content: space-between;
        }
    }
    .tile__header__navigation__menu__button {
        position: fixed;
        top: calc(var(--tile-spacing) * 4);
        right: calc(var(--tile-spacing) * 4);
        @media (min-width: 960px) {
            position: initial;
        }
    }
    .tile__header__logo {
        position: fixed;
        top: calc(var(--tile-spacing) * 4);
        left: calc(var(--tile-spacing) * 4);
        @media (min-width: 960px) {
            position: initial;
        }
    }
    .tile__header__navigation {
        display: flex;
    }
}

.tile__header__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: var(--tile-max-w-7xl);
    margin-inline: auto;
    padding-inline: calc(var(--tile-spacing) * 4);
    padding-block: calc(var(--tile-spacing) * 2);
    @media (min-width: 960px) {
        padding-block: calc(var(--tile-spacing) * 4);
        padding-inline: calc(var(--tile-spacing) * 8);
    }
}

.tile__header__navigation {
    display: none;
    flex-direction: column;
    gap: calc(var(--tile-spacing) * 8);
    align-items: center;
    @media (min-width: 960px) {
        display: flex;
        flex-direction: row;
    }
}

.tile__header__navigation__menu__button {
    cursor: pointer;
    @media (min-width: 960px) {
        display: none;
    }
}