@layer responsive {
    @media (min-width: 100rem) {
        :root {
            --casey-content-gutter: 2rem;
        }
    }

    @media (max-width: 99.9375rem) {
        :root {
            --casey-content-gutter: 1.25rem;
        }
    }

    @media (max-width: 64rem) {
        .casey-page-heading {
            align-items: stretch;
            flex-direction: column;
        }

        .casey-page-heading-actions {
            width: 100%;
            justify-content: flex-end;
        }

        .casey-master-detail {
            grid-template-columns: 1fr;
        }

        .casey-master-list {
            border-right: 0;
            border-bottom: 1px solid var(--casey-border);
        }
    }

    @media (max-width: 48rem) {
        .casey-foundation-section {
            padding: var(--casey-space-4);
        }

        .casey-action-group > * {
            flex: 1 1 auto;
        }

        .casey-page-heading-actions .casey-action-group > * {
            flex: 0 0 auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    @media (forced-colors: active) {
        :where(button, [href], input, select, textarea, summary, [contenteditable="true"], [tabindex]:not([tabindex="-1"])):focus-visible,
        :where(input, select, textarea, [contenteditable="true"]):focus {
            outline: 2px solid Highlight !important;
            outline-offset: 2px !important;
            box-shadow: none !important;
        }
    }

}