:root {
    --gravex-sidebar-width: 288px;
    --gravex-sidebar-shift: -288px;
    --gravex-sidebar-shadow-color: rgba(119, 131, 143, 0.08);
}
@media screen and (max-width: 959px) {
    .gravex-sidebar {
        position: fixed;
        top: 0;
        z-index: 1001;
        width: var(--gravex-sidebar-width);
        max-width: 90%;
        height: 100%;
        background-color: #fff;
        transition: all 0.25s;
        -webkit-transition: all 0.25s;
        overflow-y: scroll;
    }

    .gravex-sidebar {
        left: var(--gravex-sidebar-shift);
    }

    .gravex-sidebar.opened {
        left: 0;
        box-shadow: 13px 0 20px var(--gravex-sidebar-shadow-color);
    }

    .gravex-sidebar-left {
        right: unset;
        left: var(--gravex-sidebar-shift);
    }

    .gravex-sidebar-left.opened {
        right: unset;
        left: 0;
        box-shadow: 13px 0 20px var(--gravex-sidebar-shadow-color);
    }

    .gravex-sidebar-right {
        left: unset;
        right: var(--gravex-sidebar-shift);
    }

    .gravex-sidebar-right.opened {
        left: unset;
        right: 0;
        box-shadow: -13px 0 20px var(--gravex-sidebar-shadow-color);
    }
}