/* story ready notification */
.modal {
    border-radius: var(--radius-md);
    place-self: center;
    padding: var(--space-8);
}

.modal::backdrop {
    background-color: var(--gray-900);
    opacity: 0.5;
}

.modal__heading {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

.modal__description {
    margin-bottom: var(--space-8);
}


.modal__action {
    text-decoration: none;
    display: inline-block;
    padding-inline: var(--space-4);
    padding-block: var(--space-2);
    border-radius: var(--radius-sm);
}


.modal__action--primary {
    background-color: var(--blue-500);
    color: var(--color-white);
}

.modal__action--primary:visited {
    color: var(--color-white);
}

.modal__action--primary:hover {
    background-color: var(--blue-400);
}

.modal__action--primary:active {
    background-color: var(--blue-600);
    scale: 0.98;
}

.modal__action--secondary {
    background-color: var(--gray-400);
    color: var(--color-black);
}
.modal__action--secondary:visited {
    color: var(--color-black);
}

.modal__action--secondary:hover {
    background-color: var(--gray-300);
}

.modal__action--secondary:active {
    background-color: var(--gray-500);
    scale: 0.98;
}

@media screen and (min-width: 450px) {
    .modal {
        max-width: 400px;
    }
}