.layout-top-banner {
    --_bg-color: var(--woodsmoke-50);
    --top-banner-hide-progress: 0;
    background-color: var(--_bg-color);
    display: flex;
    justify-content: center;
    height: 190px;
    @media (min-width: 768px) {
        height: 252px;
    }
}

.layout-top-banner > * {
    background-color: var(--_bg-color);
    margin-inline: auto;
}

.layout-top-banner.layout-top-banner--sticky > * {
    left: 50%;
    opacity: calc(1 - var(--top-banner-hide-progress));
    position: fixed;
    top: 0;
    transform: translateX(-50%) translateY(calc(-48px * var(--top-banner-hide-progress)));
    width: 100dvw;
    z-index: 1000;
}

.layout-top-banner.layout-top-banner--released > * {
    left: auto;
    opacity: 0;
    position: static;
    top: auto;
    transform: none;
}