Promotion Banner

<!-- Default Version -->
<div class="promo-banner">
    <div class="promo-banner__media">
        <img src="https://via.placeholder.com/480x270" alt="" class="promo-banner__image" />
    </div>
    <div class="promo-banner__content">
        <h3 class="promo-banner__title">Promotion Title</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa qui veritatis aliquid. Nesciunt possimus fugit sapiente voluptatibus dolorum dolore et culpa odio.</p>
    </div>
    <div class="promo-banner__actions">
        <a href="#" class="btn btn-primary"
            >Lorem ipsum dolor
            <i class="fa fa-long-arrow-right"></i>
        </a>
    </div>
</div>

<!-- Dark Version -->
<div class="promo-banner promo-banner--dark">
    <div class="promo-banner__media">
        <img src="https://via.placeholder.com/480x270" alt="" class="promo-banner__image" />
    </div>
    <div class="promo-banner__content">
        <h3 class="promo-banner__title">Promotion Title</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa qui veritatis aliquid. Nesciunt possimus fugit sapiente voluptatibus dolorum dolore et culpa odio.</p>
    </div>
    <div class="promo-banner__actions">
        <a href="#" class="btn btn-primary"
            >Lorem ipsum dolor
            <i class="fa fa-long-arrow-right"></i>
        </a>
    </div>
</div>

.promo-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  background: $color-base-grey
    url("data:image/svg+xml,%3Csvg width='578' height='32' viewBox='0 0 578 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='.5' stroke='%239999A5' d='M.5.5h46v31H.5zM59.5.5h120v31h-120zM295.5.5h81v31h-81zM385.5.5h180v31h-180zM189.5.5h24v31h-24zM222.5.5h64v31h-64z'/%3E%3C/svg%3E")
    repeat-x left bottom 4.8rem;
  min-height: 20rem;
  margin-bottom: 4.8rem;

  @media (min-width: $breakpoint-desktop) {
    flex-direction: row;
    background-position: 0 66%;
  }

  &.promo-banner--dark {
    background-color: $color-base-blue;
    color: $color-base-white;
  }
}

.promo-banner__media {
  align-self: center;

  @media (min-width: $breakpoint-desktop) {
    max-width: 36rem;
    margin-left: 11.2rem;
  }
}

.promo-banner__image {
  display: block;
  max-width: 100%;
  height: auto;
}

.promo-banner__actions {
  position: absolute;
  bottom: 0;
  right: 0;
}

.promo-banner__content {
  flex: 1;
  padding: 2.4rem 2.4rem 8rem;
  margin-left: 0.8rem;
}

.promo-banner__title {
  @include typeHeadline(true);
}