.newsletter {
    margin-bottom: $spacing * 2;
    max-width: 500px;
    form {
        @include medium-large {
            display: flex;
        }
        margin: 0;
    }
    .email {
        @include small {
            margin-bottom: $spacing/2;
        }
        display: block;
        border-radius: 3px;
        padding: $spacing/2 $spacing/2;
        border: 1px solid $active-color;
        margin-right: $spacing/2;
        flex-grow: 1;
        width: 100%;
        &:focus {
            outline: none;
            border-color: $secondary-color;
        }
    }
    .button {
        min-width: 140px;
        display: block;
        @include small {
            width: 100%;
        }
    }
}

.block--newsletter {
    border: 1px solid $border-color;
    padding: $spacing;
    .newsletter {
        margin-bottom: 0;
    }
    .block__title {
        font-size: $large-font;
    }
    .block__contents {
        font-size: $medium-font;
    }
}

.block--newsletter--home {
    text-align: center;
    border: 1px dashed $border-color;
    padding: $spacing * 1.5;
    @include large {
        margin: 0 250px $spacing * 3 250px;
    }
    .newsletter {
        max-width: none;
        margin: 0;
    }
    .block__title {
        border-bottom: none;
        padding: 0;
        margin-bottom: $spacing/4;
    }
}
