@media (max-width: 767.98px) {
    .aside__header-close {
        display: block;
    }
    
    .aside {
        background: none;
        color: inherit;
        display: block;
        flex: 0 0 0px;
        max-width: 0;
        border: none;
    }

    .aside__bg {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 90001;
        background: rgba(255,255,255,0.5);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: 0.25s ease-in-out;
    }

    .aside__inner {
        position: fixed;
        z-index: 90002;
        top: 0;
        bottom: 0;
        left: -300px;
        width: 300px;
        background: #42505D;
        color: #fff2cc;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: 0.25s ease-in-out;
    }

    html.is-menu-open .aside__bg {
        opacity: 1;
        visibility: visible;
    }

    html.is-menu-open .aside__inner {
        transform: translateX(100%);
    }

    .menu-btn {
        display: block;
        position: relative;
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        color: #fff2cc;
    }

    .menu-btn:hover {
        opacity: 0.85;
    }

    .menu-btn:active {
        opacity: 0.7;
    }

    .menu-btn:before,
    .menu-btn:after {
        content: '';
    }

    .menu-btn:before,
    .menu-btn:after,
    .menu-btn > span {
        position: absolute;
        width: 16px;
        border-bottom: 2px solid;
        left: 50%;
        top: 50%;
        margin: -1px 0 0 -8px;
        transition: 0.25s ease-in-out;
    }

    .menu-btn:before {
        transform: translateY(-6px);
    }

    .menu-btn:after {
        transform: translateY(6px);
    }

    .header {
        padding: 0;
    }

    .header__burger {
        display: block;
    }

    .header__title {
        margin: 0 10px 0 5px;
    }

    .buttons__item {
        flex-grow: 0;
    }

    .buttons__item:nth-child(2) {
        flex-grow: 1;
    }
}

@media (max-width: 767.98px) and (max-height: 400px) {
    .buttons__btn {
        font-size: 14px;
    }
}