@layer components {
    .app-status-panel {
            display: grid;
            gap: 0.75rem;
            justify-items: center;
            padding: 2rem 0;
            text-align: center;
        }

    .app-status-panel__copy {
            color: var(--dashboard-color-text-muted);
            font-size: 0.9375rem;
            line-height: 1.5;
            margin: 0;
            max-width: 32rem;
        }

    .app-status-panel--loading {
            gap: 0;
            padding-bottom: 0;
            padding-top: 2rem;
        }

    .app-status-panel--loading > .spinner {
            margin: 0 auto 2rem;
        }

    .app-status-panel--loading > .app-card__title {
            margin-bottom: 0.75rem;
        }

    @media (min-width: 48rem) {
        .app-status-panel--loading > .app-card__title {
                    margin-bottom: 0.5rem;
                }
    }
}