.newsletter {
    &__content {
        &-inner {
            @extend %py-45;
            background-repeat: no-repeat;
            background-position: center;


            @include breakpoint(lg) {
                padding-block: 85px;
            }

            border-radius: 25px;

            &--style1 {
                background-color: $tertiary-color-1;
                @extend %p-rel;
                margin-bottom: -150px;

                h2 {
                    @extend %px-20;
                    max-inline-size: 25ch;
                    color: $white-color;

                }

                @include breakpoint(lg) {
                    margin-bottom: -200px;
                }
            }

            &--style4 {
                background-color: $secondary-color-4;
                @extend %p-rel;
                margin-bottom: -150px;

                .form {
                    max-width: 500px;
                    margin: 40px auto auto auto;


                    @include breakpoint(sm){
                        max-width: 600px;
                    }
                    .input-group{
                        @extend %px-20;
                    }
                    .form-control {
                        border-top-left-radius: 50px;
                        border-bottom-left-radius: 50px;
                        z-index: 1;
                        background-color: $white-color;
                        border-color: $white-color;

                        &::placeholder{
                            color: #98A2B3;
                        }
                    }

                    .btn {
                        @extend %p-15;
                        border-radius: 50px;
                        background: $brand-color-4;
                        border-color: $brand-color-4;
                        margin-left: -25px;
                        @include font-size(16px);
                        @include breakpoint(sm){
                            padding: 15px 30px;
                        }
                    }
                }

                h2 {
                    @extend %px-15;
                    max-inline-size: 17ch;
                    
                }

                @include breakpoint(lg) {
                    margin-bottom: -200px;
                }
            }

            h2 {
                margin: 0 auto;
            }

            a {
                @extend %mt-35;

                @include breakpoint(lg) {
                    margin-top: 55px;
                }
            }
        }
    }
}