@import "~/styles/partials/variables";
@import "~/styles/partials/mixins";

.newsLetter {
    &--container {
        background: linear-gradient($blueSecondary, rgba($blueSecondary, 0.8)), url('/assets/images/newsletter-bg.webp') no-repeat bottom;
        background-size: 100%;

        &-client {
            @include max(1024) {
                padding-bottom: 200px;
            }
        }
    }
    &--form {
        .form-group {
            .input-field {
                input {
                    border: solid 2px $whiteSecondary;
                    border-width: 0 0 2px 0;
                    color: $whiteSecondary;

                    &:not(:focus)::placeholder {
                        color: rgba($whiteSecondary, 0.5);
                    }
                    &:focus::placeholder {
                        color: rgba($whiteSecondary, 0.5);
                    }
                }
            }
        }
    }
}