@import "../../../../styles/utilities";

.bannerItem {
  @apply bg-primary-light shape-common-lg overflow-hidden;
  padding: 0;
  &.large {
    margin-bottom: 2.8rem;
    .inner {
      background-size: cover;
      background-position: right bottom;  
    }
  }
  .inner {
    @apply bg-no-repeat;
    background-size: 90%;
    background-position: right -500%   bottom 0%;
    .content {
      background-image: linear-gradient(
        to right,
        rgb(227, 242, 233) 63%,
        rgb(227, 242, 233, 0)
      );
      
      padding: 2rem;
      padding-bottom: 4rem;
      max-width: 37rem;
      @screen md {
        max-width: 49.6rem;
        padding: 4.8rem;
      }
      .top {
        .heading {
          @apply heading-1 font-heading;
          margin-bottom: 1.6rem;
        }
        .subHeading {
          @apply sub-headline;
        }
      }

      .bottom {
        margin-top: 4rem;
      }
    }
  }
}