.newsletter {
    padding: clamp(40px, 4.5vw, 64px);
    padding-bottom: clamp(48px, 4.5vw, 72px);
    border-radius: 8px;

    @include bp (sd) {
        border-radius: 12px;
    }

    &__wrapper {
        --columns: 20;
        grid-column: 3 / span var(--columns);

        @include bp (sd) {
            --columns: 18;
            grid-column: 4 / span var(--columns);
        }

        h3 {
            color: $color-secondary;
            margin-bottom: 8px;

            @include bp (sm) {
                margin-bottom: 16px;
            }
        }
        & > p {
            margin-bottom: 32px;
            color: $color-text;
            font-weight: 200;

            @include bp (sm) {
                max-width: 480px;
                margin-bottom: 40px;
            }
        }

        // Form
        :global(.past-issues:hover) {
            color: $color-secondary;

            :global(span) {
                color: $color-secondary;
                border-color: $color-secondary;
            }
        }
    }

    // Form input
    :global(.newsletter-form__email) {
        :global(input) {
            color: $color-text;
        }
        :global(input::placeholder) {
            color: $color-gray;
        }
    }
    // Form message
    :global(.newsletter-form__message.is-success) {
        color: #fff;
        background: $color-primary-tertiary20;
    }


    /*
    ** Variants
    */
    // Default color
    &--default {
        background: $color-tertiary 50% 0 / cover url(#{$dir-img}/newsletter-beige.jpg) no-repeat;

        :global(.newsletter-form__email) {
            background: $color-tertiary;
        }
     }
    // Light
    &--light {
        background: $color-cream 50% 0 / cover url(#{$dir-img}/newsletter-cream.jpg) no-repeat;

        :global(.newsletter-form__email) {
            background: $color-cream;
        }
    }
}