Card - Wide

<div class="card-wide">
    <h3 class="card-wide__title"><a href="#">Card Title</a></h3>
    <div class="card-wide__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint veniam inventore aspernatur hic.</div>
    <div class="card-wide__actions">
        <a href="#" class="card-wide__action">Learn More <i class="fa fa-long-arrow-right"></i></a>
    </div>
</div>

.card-wide {
  display: flex;
  flex-direction: column;
  background-color: $color-base-white;
  border: 1px solid $color-grey-dark;
  border-top: 4px solid $color-blue-medium;
  padding: 1.2rem;
  margin: 0 0.6rem 1.2rem;
  width: 100%;

  @media (min-width: $breakpoint-tablet) {
    flex: 1 0 0;
    max-width: 27.6rem;
  }
}

.card-wide__title {
  @include typeHeadline(true);
}

.card-wide__desc {
  flex: 1;
  margin-bottom: 2.4rem;
}

.card-wide__action {
  @include typeBody(true);
}

// Wide Card grouping layout
.card-wide-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.6rem;
}