// Newsletter
.newsletter {
    background-color: $color-primary-dark;
    padding: 56px 0;

    @include breakpoint (sm) {
        padding: 96px 0;
    }

    .wrapper {
        @include breakpoint (md) {
            display: flex;
            justify-content: space-between;
        }
    }

    h2 {
        color: $color-secondary;
    }

    // Text
    &__text {
        max-width: 400px;
        margin: 0 auto 32px;

        @include breakpoint (sm) {
            margin-bottom: 40px;
        }
        @include breakpoint (md) {
            margin-left: 0;
            margin-right: 48px;
            margin-bottom: 0;
            text-align: left;
        }

        h2 {
            margin-bottom: 16px;

            @include breakpoint (md) {
                text-align: left;
            }
        }
    }

    // Form
    .form {
        min-width: 270px;
        max-width: 320px;
        margin: 0 auto;

        @include breakpoint (md) {
            min-width: 320px;
            max-width: 440px;
            margin: 48px 0 0;
        }

        // Title (if existing)
        h2 {
            margin-bottom: 24px;

            @include breakpoint (sm) {
                margin-bottom: 40px;
            }
        }
    }

    // Notice
    &__notice {
        margin-top: 16px;
        text-align: center;
    }


    /*
    ** Variants
    */
    // Centered column mode
    &--column {
        max-width: 360px;
        margin: 0 auto;
        padding: 0;
        background: none;

        @include breakpoint (sm) {
            max-width: 444px;
        }

        // Text
        .newsletter__text {
            max-width: 440px;
            margin: 0 0 48px;
            text-align: center;

            @include breakpoint (sm) {
                margin-bottom: 72px;
            }
            @include breakpoint (md) {
                margin-bottom: 96px;
            }
        }
    }

    // Light version
    &--light {
        background: none;

        .newsletter__notice {
            p {
                color: rgba($color-text, 0.5);
            }
        }
    }
}