@layer components {
    .app-alert-panel {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #991b1b;
            display: grid;
            gap: 0.75rem;
            line-height: 1.5;
            padding: 1rem;
        }

    .app-alert-panel__title {
            align-items: center;
            color: #991b1b;
            display: flex;
            font-size: 0.9375rem;
            font-weight: 700;
            gap: 0.5rem;
        }

    .app-alert-panel__title i,
        .app-alert-panel__title svg {
            color: #ef4444;
            flex: 0 0 auto;
            height: 1.25rem;
            width: 1.25rem;
        }

    .app-alert-panel__body {
            color: #991b1b;
            font-size: 0.9375rem;
        }

    .app-alert-panel__body p + p {
            margin-top: 1rem;
        }

    .app-alert-panel__body a {
            color: #991b1b;
            font-weight: 650;
            text-decoration: underline;
        }

    .app-alert-panel__body img {
            display: block;
            max-width: min(24rem, 100%);
        }
}