:root {
    --header-padding-bottom: 0.5rem;
    --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 0.5rem));
    --header-padding-horizontal: var(--container-padding, 1.5rem);
    --header-padding: var(--header-padding-top) var(--header-padding-horizontal) var(--header-padding-bottom);
    --header-height: calc(env(safe-area-inset-top, 0px) + 4rem);
}

@screen lg {
    :root {
        --header-padding-bottom: 1rem;
        --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 1rem));
        --header-padding: var(--header-padding-top) var(--header-padding-horizontal) var(--header-padding-bottom);
        --header-height: calc(env(safe-area-inset-top, 0px) + 4.5rem);
    }
}