.alert {
    text-align: center;
    padding: var(--space-32) var(--space-64);
    border-radius: .25em;
    border: 1px solid hsl(var(--text-black-dm, var(--text-black)) / 50%);
    margin-bottom: var(--space-32);
    margin: 0 auto;

}

        .alert h2 {
            display: flex;
            align-items: center;
            color: hsl(var(--carnelian-dm, var(--carnelian)));
            justify-content: center;
            margin-bottom: var(--space-16);
            font-size: var(--step-1);
            text-transform: none;
            font-family: var(--clocktower-sans-serif);
        }

        .alert h2::before {
                margin-right: var(--space-12);
                content: '';
                font-family: var(--font-awesome);
                font-size: var(--step-1);
            }

        .alert .alert__body {
            font-family: var(--clocktower-sans-serif);
        }

        .alert .alert__body::before {
                position: relative;
                display: inline;
                font-family: var(--font-awesome);
                font-size: var(--step-1);
                margin-right: var(--space-8);
                top: var(--space-2);
            
            }

        .alert .alert__body p {
                margin: 0;
                width: 100%;
                text-align: center;
                line-height: 1.8;
                font-weight: var(--regular-weight);
                font-size: var(--step-0);
            }

        .alert .alert__body a {
                font-weight: var(--regular-weight);
            }

        .alert--error {
        color: var(--alert-error);
        background-color:  hsl(var(--alert-error), 5%);
        border-color: hsl(var(--alert-error), 3%);
    }

        .alert--error .alert-text {
            color: hsl(var(--alert-error));
        }

        .alert--error .alert-text h2::before {
                    color: hsl(var(--alert-error));
                    content: '\f06a';
                }

        .alert--error .alert-text p {
                color: hsl(var(--alert-error));

            }

        .alert--hint {
        color: var(--alert-hint);
        background:  hsl(var(--alert-hint), 5%);
    }

        .alert--hint .alert-text {
            color: hsl(var(--alert-hint));
        }

        .alert--hint .alert-text h2 {
                color: hsl(var(--alert-hint));
            }

        .alert--hint .alert-text h2::before {
                    content: '\e1ca';
                }

        .alert--reminder {
        background:  hsla(var(--alert-reminder), 75%);
        border-color: hsl(var(--alert-reminder), 100%);

    }

        .alert--reminder .alert-text {
            color: hsl(var(--text-black-dm, var(--text-black)));   
            
        }

        .alert--reminder .alert-text h2 {
                color: hsl(var(--carnelian-dm, var(--carnelian)));
            }

        .alert--reminder .alert-text h2::before {
                    content: '\f06a';
                }

        .alert--callout {
        background:  hsla(var(--alert-reminder), 75%);
        border-color: hsl(var(--alert-reminder), 100%);

    }

        .alert--callout .alert-text {
            color: hsl(var(--text-black-dm, var(--text-black)));   
            
        }

        .alert--callout .alert-text h2 {
                color: hsl(var(--text-black-dm, var(--text-black)));
                font-weight: var(--semi-bold-weight);
                margin-bottom: var(--space-32);
                text-transform: none;
                font-size: var(--step-3);
            }