@media (min-width: 576px) {
    .offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
        --cui-offcanvas-width: 90vw !important;
    }
}

@media (min-width: 768px) {
    .offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
        --cui-offcanvas-width: 30vw !important;
    }
}

@media (min-width: 992px) {
    .offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
        --cui-offcanvas-width: 30vw !important;
    }
}

@media (min-width: 1200px) {
    .offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
        --cui-offcanvas-width: 30vw !important;
    }
}

@media (min-width: 1400px) {
    .offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
        --cui-offcanvas-width: 30vw !important;
    }
}