/*------------------------------------------------------------
NEWSLETTER
====================================*/

/* Variables Custom */
$newsletter-font-weight: $font-weight-light !default;
$newsletter-color: $white !default;
$newsletter-bg: $dark !default;
$newsletter-padding-y-mobile: 3rem !default;
$newsletter-padding-x-mobile: 1.5rem !default;
$newsletter-padding-y-desktop: 4rem !default;
$newsletter-padding-x-desktop: 3rem !default;

$newsletter-title-font-size-mobile: 1.6rem !default;
$newsletter-title-font-size-desktop: 2.6rem !default;
$newsletter-title-font-weight: $font-weight-sbold !default;
$newsletter-title-font-color: $white !default;

$newsletter-form-max-width: 54rem !default;
/***************************************/

.newsletter-container {
  margin-bottom: 9rem;
}
.newsletter-wrapper {
  position: relative;
  padding: $newsletter-padding-y-mobile $newsletter-padding-x-mobile;
  text-align: center;
  font-weight: $newsletter-font-weight;
  color: $newsletter-color;
  background: $dark;
  form {
    margin: 1.5rem auto 0;
    max-width: $newsletter-form-max-width;
  }
  &:before {
    content: '';
    display: block;
    position: absolute;
    left: -1.5rem;
    right: -1.5rem;
    bottom: -4rem;
    height: 15rem;
    background: {
      image: url('~media/icons/pattern.svg');
      size: 6rem;
    }
  }
  & > * {
    position: relative;
  }
}
.newsletter-title {
  font-size: $newsletter-title-font-size-mobile;
  font-weight: $newsletter-title-font-weight;
  color: $newsletter-title-font-color;
}

/* RESPONSIVE */
/***************************************/
@include media-breakpoint-up(lg) {
  .newsletter-wrapper {
    padding: $newsletter-padding-y-desktop $newsletter-padding-x-desktop;
    &:before {
      left: 3rem;
      right: -3rem;
      bottom: -3rem;
      height: 90%;
    }
  }
  .newsletter-title {
    font-size: $newsletter-title-font-size-desktop;
  }
}
