@media (max-width: 720px) {
    :root {
        --wm-gutter: 6px;
        --wm-space: 8px;
        --wm-space-sm: 4px;
        --wm-space-lg: 10px;
    }

    html,
    body {
        --wm-gutter-active: var(--wm-gutter);
    }

    :where(.wrap, .page, .layout, .main, .content, .calc-app, .page-shell, .list-wrap, .app) {
        padding-left: var(--wm-gutter-active) !important;
        padding-right: var(--wm-gutter-active) !important;
    }

    :where(.hero, .hero-inner, .hero-card, .panel, .card, .toolbar, .table-wrap, .content, .list-wrap, .section-head, .sheet-header, .sheet-content, .sheet-footer, .card-inner, .panel-head, .panel-body) {
        padding-left: var(--wm-space) !important;
        padding-right: var(--wm-space) !important;
    }

    :where(.hero, .panel, .card, .toolbar, .table-wrap, .content, .list-wrap, .section-head, .sheet-header, .sheet-content, .sheet-footer, .card-inner, .panel-head, .panel-body) {
        padding-top: var(--wm-space) !important;
        padding-bottom: var(--wm-space) !important;
    }

    :where(.wrap, .page, .layout, .main, .content, .hero-inner, .hero-top, .toolbar, .panel, .card, .section-head, .list-wrap, .table-wrap, .grid, .sheet-actions, .sheet-tabs, .sale-extra-row, .bet-row) {
        gap: var(--wm-space) !important;
    }

    :where(.card, .panel, .toolbar, .hero, .section-head, .list-wrap, .table-wrap, .content) + :where(.card, .panel, .toolbar, .hero, .section-head, .list-wrap, .table-wrap, .content) {
        margin-top: var(--wm-space) !important;
    }
}