.content {
  margin: 0 auto;
  @include min(tablet) {
    .active {
      width: 70rem;
      left: 2rem;
      z-index: 15;
    }
  }
  @include max(mobile) {
    .active {
      bottom: 30%;
    }
  }
}
.layer {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
}
.form {
  position: fixed;
  background: #fff;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.2);
  border-radius: 0.4rem;
  padding: 2rem;
  transition: 0s;
  bottom: -100%;
  z-index: var(--scroll-to-top-index);
  @include min(tablet) {
    @include flex-direction(column);
    left: -90rem;
    max-width: 90rem;
    height: fit-content;
    top: 25vh;
    position: fixed;
  }
}

.closeBtn {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  z-index: 2;
  border: none;
  color: #00889e;
}
.contentPage {
  padding: 3.2rem 1.6rem;
  width: 100%;
  background: var(--newsletter-container-background-color);
  z-index: var(--scroll-to-top-index);
  max-width: 100rem;
  margin: 0 auto;
  form {
    button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background-color: var(--primary-button-color, #6e33e5);
      color: var(--primary-button-color-text, #ffffff);
      padding: 0.9rem 3rem;
      font-weight: 700;
      font-size: 1.8rem;
      border-radius: var(--border-radius);
      white-space: nowrap;
      border-radius: 100px;
    }
  }
}