.mail-subscription__container {
  padding-top: var(--mail-subscription-padding-top);
  padding-bottom: var(--mail-subscription-padding-bottom);
}

.mail-subscription__wrapper {
  background-color: rgba(var(--color-accent-1), 0.1);
  border-radius: 30px;
  padding: 30px 15px;
  text-align: center;

  & .mail-subscription__heading {
    font: normal 700 28px/normal var(--font-body-family);
    margin: 0 0 12px;
  }

  & .mail-subscription__subheading {
    font: normal 700 16px/normal var(--font-body-family);
    margin: 0 0 8px;
  }

  & .mail-subscription__description {
    font: normal 400 14px/140% var(--font-body-family);
    margin: 0 0 30px;
  }

  form {
    & div {
      padding: 0 !important;
    }

    & p {
      font: normal 400 11px/140% var(--font-body-family);
      margin: 0 0 4px;
      padding: 0;
    }

    & input {
      margin: 0 0 20px !important;
    }
  }

  & .mail-subscription__klaviyo--desktop {
    display: none;
  }

  & .mail-subscription__klaviyo--mobile {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .mail-subscription__container {
    padding-top: var(--mail-subscription-padding-top);
    padding-bottom: var(--mail-subscription-padding-bottom);
  }

  .mail-subscription__wrapper {
    padding: 40px 80px;

    & .mail-subscription__heading {
      font-size: 40px;
      margin: 0 0 16px;
    }

    & .mail-subscription__subheading {
      font-size: 20px;
      margin: 0 0 10px;
    }

    & .mail-subscription__description {
      font-size: 16px;
      margin: 0 0 40px;
    }

    & form {
      & p {
        margin: 4px 0 0;
      }

      & input {
        margin: 0 20px 0 0 !important;
      }

      & button {
        padding: 0 30px !important;
      }

      div[data-testid="form-component"] {
        max-width: 300px;
      }

      div[data-testid="form-row"] {
        justify-content: center;
      }

      div:has(> button) {
        margin: 0 !important;
      }
    }

    & .mail-subscription__klaviyo--desktop {
      display: block;
    }

    & .mail-subscription__klaviyo--mobile {
      display: none;
    }
  }
}