Team Banner

<div class="team-banner">
    <div class="team-banner__header">
        <h2 class="team-banner__title">TITLE</h2>
    </div>
    <div class="team-banner__content">
        <h3 class="team-banner__subtitle">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo, ut.</h3>

        <ul class="team-banner__list">
            <li class="team-banner__item">Lorem ipsum dolor sit amet</li>

            <li class="team-banner__item">Exercitationem impedit atque similique fugit nostrum incidunt</li>

            <li class="team-banner__item">Nobis ut excepturi fugit</li>

            <li class="team-banner__item">Consequatur cupiditate odit odio placeat aspernatur ut</li>

            <li class="team-banner__item">Vero rerum beatae iusto consectetur</li>
        </ul>
    </div>

    <div class="team-banner__actions">
        <a href="" class="btn btn-primary"
            >Button Label
            <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
        </a>
    </div>
</div>

.team-banner {
  @media (min-width: $breakpoint-desktop) {
    display: flex;
    position: relative;
    align-items: flex-end;
  }
}

.team-banner__header {
  position: relative;

  @media (min-width: $breakpoint-tablet) {
    height: 236px; // Height of BG image
    background: url("/images/team-banner-bg.png");
    background-repeat: no-repeat;
    flex: 1 0 540px; // Width of BG image
    background-size: contain;
  }
}

.team-banner__title {
  @include typeHeadline(true);
  color: $color-base-blue;

  @media (min-width: $breakpoint-tablet) {
    color: $color-base-white;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 196px; // Container for text
    padding: 1.2rem;
    margin: 0;
  }
}

.team-banner__content {
  @media (min-width: $breakpoint-desktop) {
    padding: 4.8rem 2.4rem 0;
  }
}

.team-banner__subtitle {
  @include typeTitle(true);
  color: $color-blue-medium;
  margin: 0 0 1.6rem;
}

.team-banner__list {
  list-style: none;
  padding-left: 0;

  @media (min-width: $breakpoint-desktop) {
    columns: 2;
    gap: 3.2rem;
  }
}

.team-banner__item {
  @include typeBody(true);
  color: #696969;
  margin-bottom: 1.2rem;
}

.team-banner__actions {
  text-align: center;

  @media (min-width: $breakpoint-desktop) {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}