My Team

<div class="my-team">
    <div class="my-team__inner">
        <div>
            <h2 class="my-team__header">My Team</h2>
        </div>
        <div class="my-team__content">
            <div class="my-team__title">Manager Center</div>
            <div class="my-team__desc">
                <ul>
                    <li>View important people/HR milestones</li>
                    <li>Stay up to date on news, events and team activity</li>
                    <li>Find guidance for key manager tasks</li>
                    <li>Get resources to be a more effective manager</li>
                </ul>
            </div>
            <div class="my-team__actions">
                <a href="#" class="btn btn-link">Go to Manager Center&nbsp;<i class="fa fa-long-arrow-right"></i> </a>
            </div>
        </div>
    </div>
</div>

.my-team {
  margin-bottom: 4rem;
  position: relative;

  @media (min-width: $breakpoint-desktop) {
    background-image: url("/images/photos/my-team.jpg");
    background-repeat: no-repeat;
    background-position: 12.8rem 0;
  }

  @media (min-width: $breakpoint-desktop) {
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin-left: 21.6rem;
      background-color: rgba($color-base-grey, 0.3);
    }
  }
}

.my-team__inner {
  position: relative;
  z-index: 1;

  @media (min-width: $breakpoint-desktop) {
    display: flex;
    padding-left: 5.6rem;
    margin-left: 28rem;
  }
}

.my-team__header {
  @include typeDisplay(true);
  position: relative;
  margin-top: 0;
  color: $color-base-white;
  background-color: $color-blue-medium;
  min-width: 26.8rem;
  min-height: 9.6rem;
  display: inline-block;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 8rem;
  padding: 2.4rem;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: -8rem;
    width: 8rem;
    height: 100%;
    background-image: linear-gradient(to right, rgba($color-grey-light, 0.6) 4rem, rgba($color-grey-light, 0.3) 4rem);
  }
}

.my-team__title {
  @include typeHeadline(true);
  overflow-wrap: break-word;
  margin-bottom: 1.6rem;
}

.my-team__content {
  border-top: 0.4rem solid $color-green-medium;
  background-color: $color-base-white;
  padding: 2.4rem 2.4rem 1.2rem;
  flex: 1 0 auto;
}

.my-team__desc {
  @include typeSubheader(true);
}

.my-team__actions {
  text-align: right;
}