.banner {
  background-color: #ebebf5;
  background-repeat: no-repeat;
  margin-bottom: 1.5rem;
  padding: 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--project-management {
  background-image: url(https://static.infragistics.com/marketing/slingshot/blog-ad/project-mangement/slingshot-blog-ad-image-project-management-1-650.png);
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-position: right bottom;
  padding: 2.5rem 40% 2.5rem 2rem;
}
.banner.banner--data-analytics {
  background-image: url(https://static.infragistics.com/marketing/slingshot/blog-ad/data-analytics/slingshot-blog-ad-image-data-analytics-2-650.png);
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-position: right bottom;
  padding: 2.5rem 40% 2.5rem 2rem;
}
.banner.banner--content-management {
  background-image: url(https://static.infragistics.com/marketing/slingshot/blog-ad/content-management/slingshot-blog-ad-image-content-management-1-650.png);
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-position: right bottom;
  padding: 2.5rem 40% 2.5rem 2rem;
}
.banner.banner--collaboration {
  background-image: url(https://static.infragistics.com/marketing/slingshot/blog-ad/collaboration/slingshot-blog-ad-image-collaboration-2-650.png);
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-position: right bottom;
  padding: 2.5rem 40% 2.5rem 2rem;
}
.banner.banner--business-intelligence {
  background-image: url(https://static.infragistics.com/marketing/slingshot/blog-ad/project-mangement/slingshot-blog-ad-image-project-management-1-650.png);
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-position: right bottom;
  padding: 2.5rem 40% 2.5rem 2rem;
}
.banner.banner--free-trial {
  background-image: url(https://static.infragistics.com/marketing/slingshot/blog-ad/free-trial/slingshot-blog-ad-image-free-trial-650.png);
  background-size: 45% auto;
  background-repeat: no-repeat;
  background-position: right bottom;
  padding: 2.5rem 40% 2.5rem 2rem;
}
.banner.banner--experience-slingshot {
  background-image: url(https://static.infragistics.com/marketing/slingshot/blog-ad/experience-slingshot/slingshot-blog-ad-image-experience-slingshot-650.png);
  background-size: 45% auto;
  background-repeat: no-repeat;
  background-position: right top;
  padding: 2.5rem 40% 2.5rem 2rem;
}
.banner.banner--custom-fields {
  background-image: url(https://download.infragistics.com/marketing/slingshot/blog-ad/custom-fields/slingshot-blog-ad-image-custom-fields-650.png);
  background-size: 40% auto;
  background-repeat: no-repeat;
  background-position: right bottom 50%;
  padding: 2.5rem 40% 2.5rem 2rem;
}
.banner.banner--task-types {
  background-image: url(https://download.infragistics.com/marketing/slingshot/blog-ad/task-types/slingshot-blog-ad-image-task-types-650.png);
  background-size: 40% auto;
  background-repeat: no-repeat;
  background-position: right bottom 50%;
  padding: 2.5rem 40% 2.5rem 2rem;
}
.banner.banner--private-equity { 
  background-image: url(https://static.infragistics.com/marketing/slingshot/blog-ad/private-equity/slingshot-blog-ad-image-private-equity-650.png);
  background-size: 40% auto;
  background-repeat: no-repeat;
  background-position: right center;
  padding: 2.5rem 40% 2.5rem 2rem;
}
@media only screen and (max-width: 768px) {
  .banner[class*="banner--"] {
    padding: 2rem 1.5rem;
    background-image: none;
    margin-bottom: 1.5rem;
  }
}