.newsletter-new {
  &.page-width--narrow {
    max-width: 90rem;
  }

  .newsletter-new__heading-wrap {
    margin-bottom: 40px;

    @media (max-width: 749px) {
      margin-bottom: 25px;
    }

    .newsletter-new__heading {
      margin: 0;
    }

    .newsletter-new__subheading {
      margin-top: 16px;
      max-width: 660px;
      margin-inline: auto;

      @media (max-width: 749px) {
        font-size: 12px;
        margin-top: 12px;
      }
    }
  }
  
  .newsletter-new__container {
    padding: 60px;
    border-radius: var(--text-boxes-radius);

    @media (max-width: 749px) {
      padding: 2rem;
    }
  }

  .newsletter-form {
    margin-bottom: 20px;

    @media (min-width: 750px) {
      max-width: 50rem;
    }

    .newsletter-form__field-wrapper {
      display: flex;
      gap: 10px;
      align-items: center;
      max-width: 100%;

      @media (max-width: 749px) {
        flex-direction: column;
      }

      .field::before, .field::after {
        display: none;
      } 
      
      .field__input {
        background: #F6F0E9;
        color: #000;
        border: none;
        border-radius: 99px;
        height: 55px;
        font-size: 14px;

        @media (max-width: 749px) {
          height: 50px;
        }
      }

      .field__label {
        color: #000;
        opacity: .5;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
      }

      .field__input:focus {
        box-shadow: none;
      }

      .field__input:focus~.field__label, .field__input:not(:placeholder-shown)~.field__label {
        top: calc(var(--inputs-border-width) + 1.4rem);
        font-size: 1rem;
      }

      .newsletter-form__button {
        position: relative;
        display: inline-block;
        flex-shrink: 0;
        font-size: 1.4rem;
        letter-spacing: 0.05rem;
        height: 55px;
        padding: 15px 35px;
        width: fit-content;
        background-color: rgb(var(--color-button));
        color: rgb(var(--color-button-text));
        border-radius: 99px;

        @media (max-width: 749px) {
          width: 100%;
          height: 50px;
        }
      }
    }
  }

  .newsletter-__footer-text {
    font-size: 12px;
    opacity: .5;

    @media (max-width: 749px) {
      font-size: 11px;
    }
  }
}