@media (max-width: 80rem) {
    .ezv-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ezv-status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ezv-two-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 64rem) {
    .ezv-page-header {
        flex-direction: column;
    }

    .ezv-context-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .ezv-page-title {
        font-size: 1.5rem;
    }

    .ezv-page-actions,
    .ezv-actions,
    .ezv-form-actions,
    .ezv-section-header,
    .ezv-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .ezv-page-actions > *,
    .ezv-actions > *,
    .ezv-form-actions > *,
    .ezv-section-header > .ezv-button,
    .ezv-toolbar > .ezv-button {
        width: 100%;
    }

    .ezv-app .ui-fluid .ezv-form-actions .ui-button,
    .ezv-form-actions > div > .ui-button,
    .ezv-form-actions > div > .ezv-button {
        width: 100%;
    }

    .ezv-section--surface {
        padding: var(--ezv-surface-padding-mobile);
    }

    .ezv-app .ui-button,
    .ezv-button {
        min-height: 2.875rem;
    }

    .ezv-metric-grid,
    .ezv-status-grid,
    .ezv-context-grid {
        grid-template-columns: 1fr;
    }

    .ezv-alert {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ezv-alert > .ezv-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .ezv-app .ui-dialog {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        margin: .5rem;
    }
}

@media (max-width: 24rem) {
    .ezv-card--metric {
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ezv-app *,
    .ezv-app *::before,
    .ezv-app *::after {
        scroll-behavior: auto;
        transition-duration: .01ms;
        animation-duration: .01ms;
        animation-iteration-count: 1;
    }
}