@import "../../../../assets/scss/variables";

.newinvitationheader {
  width: 100%;
  max-width: 1023px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 37px;
  gap: 16px;
  margin-top: 2.2rem;

  @media only screen and (max-width:1190px){
    flex-direction: column;
  }

  &-text {

    h2 {
      font-size: 20px;
      font-weight: $extra-light;
      letter-spacing: 0.4px;
      color: $text-color;
    }
  }

  &-helper {
    position: relative;
    top: 0;
    right: 0;
  }

  .animated-guidehelperalt-wrapper {
    @media only screen and (max-width: 1190px){
      top: 10px;
      right: -50px;
    }
  }

  .expanded-wrapper {
    @media only screen and (max-width: 1190px) {
      top: 10px;
      right: -50px;
    }

    @media only screen and (max-width: 590px) {
      width: auto;
      max-width: 350px;
    }

    @media only screen and (max-width: 412px) {
      max-width: 250px;

      .close-img-wrapper {
        margin-top: -13px;
      }
    }
  }
}