:where(.alerts-container) {
    width: 100%;
    display: grid;
    row-gap: 0.5rem;
    background-color: var(--color-alert-container-background);
    margin-block: var(--size-medium);


    :where(.single-alert) {
        display: grid;
        grid-template-columns: 10rem 1fr 10rem;
        background-color: var(--local-alert-background-color);
        column-gap: 3rem;
        padding: var(--size-medium);
        align-items: center;
        width: 100%;

        max-width: var(--content-width-x-large);
        margin-inline: auto;
        border-radius: var(--border-radius-large);

        :where(&.common) {
            gap: 0;
            grid-template-columns: 0 1fr 0;
            --local-alert-background-color: var(--color-alert-background-info);
            --local-alert-text-color: var(--color-alert-text-info);
        }

        :where(&.info) {
            --local-alert-background-color: var(--color-alert-background-info);
            --local-alert-icon-color: var(--color-alert-icon-info);
            --local-alert-text-color: var(--color-alert-text-info);
        }

        :where(&.warning) {
            --local-alert-background-color: var(--color-alert-background-warning);
            --local-alert-icon-color: var(--color-alert-icon-warning);
            --local-alert-text-color: var(--color-alert-text-warning);
        }

        :where(&.critical) {
            --local-alert-background-color: var(--color-alert-background-critical);
            --local-alert-icon-color: var(--color-alert-icon-critical);
            --local-alert-text-color: var(--color-alert-text-critical);
        }

        :where(&.hidden) {
            display: none;
        }

        :where(&.hide) {
            animation: alert-close 0.25s forwards;
        }

        :where(.alert-copy) {
            color: var(--local-alert-text-color);
            line-height: 24px;
            font-weight: var(--font-weight-medium);
        }

        /* Bold lead-in ("title") sits inline with the copy, per the concept. */
        .alert-copy strong {
            font-weight: var(--font-weight-bold);
        }

        :where(.alert-copy a) {
            color: var(--local-alert-text-color);
            text-decoration: underline;
        }

        :where(.alert-copy a:visited) {
            color: var(--local-alert-text-color);
        }

        :where(.alert-copy a:visited) {
            color: var(--local-alert-text-color);
        }

        :where(.alert-icon) {
            justify-self: end;
            display: flex;
        }

        :where(.alert-icon svg) {
            color: var(--local-alert-icon-color);
        }

        :where(.alert-headline) {
            font-size: 1.2em;
            font-weight: 700;
            line-height: 1;
        }

        :where(.alert-copy,  .alert-cta) {
            display: inline;
        }

        :where(svg) {
            max-height: 2rem;
            max-width: 2rem;
            width: 100%;
        }

        /* I think this selector is wrong */

        :where(&.dismiss-alert svg) {
            max-width: 1.5rem;
            cursor: pointer;
        }
    }
}

@keyframes alert-close {
    100% {
        opacity: 0;
        display: none;
    }
}

@media screen and (max-width: 75em) {
    .alerts-container :where(.single-alert) {
        grid-template-columns: 5rem 1fr 5rem;
        /* Inset from the screen edges with a smaller inner gutter on narrow viewports. */
        width: auto;
        margin-inline: var(--size-small);
        padding-inline: var(--size-small);
    }
}