:root {
    --color__form-error: #f00;
    --color__form-success: #0f0;
    --color__background: #fff;
}

/* mailing list box
--------------------------------------------- */
.mailing-list {
    padding: 5rem 2rem;
    text-align: center;
    margin-bottom: 2rem;
    background-color:  var(--color__background);
}

.mailing-list__container {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.mailing-list__title {
    margin: 0 0 1rem 0;
    line-height: 1;
}

.mailing-list__email,
.mailing-list .mailing-list__submit {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}

.mailing-list__container .error {
    color: var(--color__form-error);
    margin-top: 0.5rem;
}

.mailing-list__email.error {
    border-color: var(--color__form-error);
}

.mailing-list__message--error {
    border: 1px solid var(--color__form-error);
    padding: 1rem;
    background-color: #ffeff2;
    margin-top: 1rem;
}

.mailing-list__message--success {
    border: 1px solid var(--color__form-success);
    padding: 1rem;
    background-color: #efffef;
    margin-top: 1rem;
}