.alert {
    --alert-bg: var(--color-error);
    --alert-on-bg: var(--color-tint);
    --alert-on-bg-alternative: var(--color-warning);

    background: var(--alert-bg);
    color: var(--alert-on-bg);
    padding-top: var(--w-full-padding);
    padding-bottom: var(--w-full-padding);
}

.alert h2 {
    font-size: var(--text-alert);
}

.alert p {
    color: var(--alert-on-bg-alternative);
    font-size: var(--text-xl);
}

@media (prefers-color-scheme: dark) {
    .alert {
        --alert-bg: var(--color-error-shade-20);
    }
}