.hearts-input {
  background: $color-white;

  &__wrapper {
    // this already has flex classes with 'row' class defined, I'm just modifying alignment here so the hearts background image doesn't move when height changes as user types in textarea and google recaptcha becomes visible
    align-items: flex-start; 
  }

  &__column {
    padding: 10px 20px;
  
    @media screen and (min-width: 992px) {
      padding: 30px;
    }

    &-left {
      background: url("../img/icons/two-hearts.svg") bottom right 30px no-repeat;
  
      @media screen and (min-width: 992px) {
        background: url("../img/icons/two-hearts.svg") bottom 50px right 50px no-repeat;
      }

    }
  } 

  &__form-label {
    display: block;
    color: $color-gray;
  }

  &__form-textarea {
    width: 100%;
    border: 1px solid $color-blue-dark;
    padding: 10px;
    font-family: $primary-font;
    font-size: 16px;
  }

  &__form-submit {
    &:disabled {
      background: $color-gray-light !important;
      border: 2px solid $color-gray-light !important;
      cursor: auto !important;
    }
  }

  &__recaptcha {
    display: none;
  }

  &__response {
    display: none;

    &--error {
      color: $color-error;
    }
  }

  &__success {
    display: none;
  }
    
  &__success-image {
    display:block;
    margin: 0 auto;
  }

  &__success-message {
    font-weight: bold;
    text-transform: none;
  }

  &__messages {
    overflow: hidden;
    background: center / contain no-repeat $color-blue-secondary url("../img/hearts/hearts-bg.svg"); 
    min-height: 500px; 
  }
  
  .messages {
    display: flex;
    &__block {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      margin-bottom: 80px;
    }
    &__img-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &__img {
      display: block;
      transform: scale(0.9);
      @media screen and (min-width: 992px) {
        transform: scale(1);
      }
    }
    .heart-1 {
      width: 400px;
      @media screen and (min-width: 992px) {
        width: 540px;
      }
    }
    .heart-2 {
      width: 198px;
      @media screen and (min-width: 992px) {
        width: 253px;
      }
    }
    .heart-3 {
      width: 153px;
      @media screen and (min-width: 992px) {
        width: 206px;
      }
    }
    span {
      font-weight: 400;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      font-size: rem(15);
      line-height: 1.2;
      margin: 0;
      display: block;
      width: 75%;
      text-align: center;
      @media screen and (min-width: 992px) {
        font-size: rem(16);
      }
    }

    .x1 {
      animation: moveVerticallyMobile 9s ease-in-out infinite alternate, sideMovementMobile 52s linear infinite;
    }

    .x2 {
      margin-top: 70px;
      margin-left: 80px;
      animation: moveVerticallyMobile 12s ease-in-out infinite alternate, sideMovementMobile 64s linear infinite;
    }
    .x3 {
      margin-top: 130px;
      margin-left: 50px;
      animation: moveVerticallyMobile 7s ease-in-out infinite alternate, sideMovementMobile 64s linear infinite;
    }
  }
}

@keyframes moveVertically {
  0% {
    // top: 500px;
    top: 0;
    opacity: 0;
    transform: scale(0);
  }
  5% {
    top: 0;
    opacity: 1;
    transform: scale(1);
  }
  100% {
    // top: -1500px;
    top: -2500px;
  }
}

@keyframes moveVerticallyMobile {
  0% {
    top: 80px;
  }
  100% {
    top: 0px;
  }
}

@keyframes sideMovement {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 80px;
  }
}

@keyframes sideMovementMobile {
  0% {
    // left: 800px;
    left: 0;
    opacity: 0;
    transform: scale(0);
  }
  5% {
    left: 0;
    opacity: 1;
    transform: scale(1);
  }
  100% {
    // left: -1000px;
    left: -1800px;
  }
}