body.is-scrolled header { transform: translateY(-100%) !important; }
.cover { overflow: inherit; display: block; }
aside { position: sticky; top: 0; display: inline-flex; }
.content-side { display: inline-flex; width: calc(100% - 330px); margin-left: 0; overflow-x: inherit; }
.content-side > main { max-width: calc( 100% - 200px); }

@media (max-width: 1023px) {
    .header__box { height: calc(100dvh - 83px); top: 83px; }
    .content-side > .navigator { display: none; }
    .content-side > main { max-width: 100%; padding-right: 0; }
}

@media (max-width: 767px){
    .header__box { height: calc(100dvh - 73px); top: 72px; }

    aside { position: absolute; background-color: #eee; height: calc(100dvh - 110px); top: 111px; z-index: 97; transition: all .3s; max-height: none; left: -100%; }
    .aside-hidden { display: inline; }
    .aside-open { display: none; }
    .aside-is-open aside { left: 0; }

    .btn--aside { width: 100%; transition: all .3s; border-radius: 0; position: relative; z-index: 98; position: fixed; gap: 4px; top: 72px; }
    .content-side { margin-left: 0; border-radius: 0; padding-left: 20px; padding-right: 20px; padding-top: 50px; width: 100%; }
    .content-side > main { max-width: 100%; }

    body.aside-is-open { overflow: hidden; }
    body.aside-is-open .aside-hidden { display: none; }
    body.aside-is-open .aside-open { display: inline; }
    body.is-scrolled .btn--aside { top: 0; }
    body.is-scrolled aside { position: fixed; height: calc(100dvh - 41px); top: 39px; }
}