@media (max-width: 960px) {
    .mobile-drawer,
    .drawer-nav {
        max-width: 100%;
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }

    .drawer-nav > a {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-height: 58px;
        box-sizing: border-box;
        overflow: hidden;
        transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .drawer-nav > a:hover,
    .drawer-nav > a:focus-visible {
        border-color: #ffc69f;
        background: #fff9f5;
        box-shadow: 0 8px 20px rgba(20, 33, 61, .08);
        transform: translateY(-1px);
    }

    .drawer-nav > a > div {
        min-width: 0;
        overflow: hidden;
    }

    .drawer-nav > a > div > b,
    .drawer-nav > a > div > small {
        display: block;
        overflow: hidden;
        max-width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .drawer-nav > a > i.material-symbols-rounded {
        font-family: "Material Symbols Rounded";
        font-size: 21px;
        font-style: normal;
    }

    .drawer-nav > a > strong {
        flex: 0 0 auto;
        min-width: 35px;
        padding: 4px 7px;
        border-radius: 999px;
        background: #ff6508;
        color: #fff;
        font-size: 7px;
        font-weight: 900;
        text-align: center;
        box-shadow: 0 5px 12px rgba(255, 101, 8, .22);
    }

    .drawer-nav > a.drawer-nav-featured {
        border-color: #ffbf93;
        background: linear-gradient(135deg, #fff4eb, #fff 58%, #eef4ff);
    }

    .drawer-nav > a.drawer-nav-featured::before {
        position: absolute;
        inset: 0 0 0 auto;
        width: 4px;
        content: "";
        background: linear-gradient(#ff6508, #ff9a55);
    }

    .drawer-nav > a.drawer-nav-featured > i {
        background: linear-gradient(145deg, #ff6508, #ff8d45);
        color: #fff;
        box-shadow: 0 7px 15px rgba(255, 101, 8, .24);
    }
}