.header-container {
    background: var(--wp--preset--color--base);
}

.has-sticky-header--active .site-header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    box-shadow: var(--wp--custom--box-shadow--regular);
}


#header {
    transition: padding 0.3s ease, width 0.3s ease;
}

.is-sticky-header #header {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

@media (min-width: 768px) {
    .branding .logo {
        transition: width 0.3s ease;
    }

    .is-sticky-header .branding .logo {
        width: 128px;
    }
}