.banner {
  background-image:  var(--wpr-bg-e9ce8c46-297e-4922-9ea0-36956a0ae931), linear-gradient(90deg,rgb(251, 179, 101) -20%,rgb(236, 65, 122) 40%);
  background-size: 50% auto, auto;
  background-repeat: no-repeat;
  background-position: right top, top;
  margin-bottom: 1.5rem;
  padding: 2.5rem 40% 2.5rem 2rem;
}
.banner__headline {
    font-size: 1.75rem;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 0;
}
.banner__msg {
    font-size: 1.15rem;
    line-height: 1.25em;
}

/**** Variants ****/
.banner.banner--full {}
.banner.banner--embedded {
  background-image: var(--wpr-bg-363ee033-4207-40fc-97ba-7610cbcdf356), var(--wpr-bg-e73dc705-de59-4f5b-a418-971a740a2453), linear-gradient(90deg,rgb(251, 179, 101) -20%,rgb(236, 65, 122) 40%);
  background-size: 40% auto, 50% auto, auto;
  background-repeat: no-repeat;
  background-position: right bottom, right top, top;
  margin-bottom: 1.5rem;
  padding: 2.5rem 40% 2.5rem 2rem;
}

@media only screen and (max-width: 1199px) {
  .banner.banner--embedded.banner--full {
    background-size: 40% auto, 50% auto, auto;
    background-position: right 101%, right top, top;
  }
  .banner.banner--embedded {
    background-size: 50% auto, 50% auto, auto;
    background-position: 115% bottom, right top, top;
  }

}

@media only screen and (max-width: 990px) {
  .banner.banner--embedded.banner--full {
    background-size: auto 80%, auto;
    background-position: right top, top;
  }
  .banner.banner--embedded {
    padding: 2rem 1.5rem;
    background-image: url(https://static.infragistics.com/marketing/reveal/blog-ad/reveal-blog-ad-image-mobile-teardrop-shape-200.png), linear-gradient(90deg,rgb(251, 179, 101) 0%,rgb(236, 65, 122) 40%);
    background-size: auto 80%, auto;
    background-repeat: no-repeat;
    background-position: right top, top;
    margin-bottom: 1.5rem;
  }
}