.newsletter-module {
  height: 100%;
  position: relative;
  margin-top: 30px;
}

.newsletter-module canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
}

@media (prefers-reduced-motion) {
  .newsletter-module .no-animation-background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .newsletter-module canvas {
    display: none !important;
  }
}

@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .newsletter-module .no-animation-background {
    display: none;
  }
}

.newsletter {
  background-color: var(--background);
}

/* S */
@media (max-width: 479px) {
  /* 4 columns */
  .newsletter {
    grid-column: 1 / 5;
    height: 628px;
    margin-bottom: 30px;
  }
}

/* M */
@media (min-width: 480px) and (max-width: 960px) {
  /* 8 columns */
  .newsletter {
    grid-column: 1 / 13;
    margin: 48px;
    height: 545px;
  }
}

@media (max-width: 960px) {
  .newsletter-module .no-animation-background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: 2947px 1163px;
  }

  .newsletter-module canvas {
    display: none !important;
  }
}

/* L - XL */
@media (min-width: 960px) {
  /* 12 columns */
  .newsletter {
    grid-column: 7 / 13;
    margin: 48px;
  }
}

@media (min-width: 960px) and (max-width: 1499px) {
  .newsletter {
    height: 545px;
  }
}

@media (min-width: 1500px) {
  .newsletter {
    height: 480px;
  }
}