Promotion Cards / List

<!-- Promo Card - Dark -->
<a href="#" class="promo-card">
    <div class="promo-card__media">
        <img src="https://via.placeholder.com/64x64" alt="" class="promo-card__image" />
    </div>
    <div class="promo-card__body">
        <div class="promo-card__title">Promo Title</div>
        <div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
    </div>

    <div class="promo-card__footer">
        <button class="btn btn-primary">
            Lorem ipsum
            <i class="fa fa-long-arrow-right"></i>
        </button>
    </div>
</a>
<!-- /Promo Card - Dark -->

<!-- Promo Card - Light -->
<a href="#" class="promo-card promo-card--light">
    <div class="promo-card__media"></div>
    <div class="promo-card__body">
        <div class="promo-card__title">Promo Title</div>
        <div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
    </div>

    <div class="promo-card__footer">
        <button class="btn btn-primary">
            Lorem ipsum
            <i class="fa fa-long-arrow-right"></i>
        </button>
    </div>
</a>
<!-- /Promo Card - Light -->

<!-- Promo Card List -->
<div class="promo-card-list">
    <!-- Promo Card 1 - White -->
    <a href="#" class="promo-card promo-card--white">
        <div class="promo-card__media"></div>
        <div class="promo-card__body">
            <div class="promo-card__title">Promo Title</div>
            <div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
        </div>

        <div class="promo-card__footer">
            <button class="btn btn-light">
                Lorem ipsum
                <i class="fa fa-long-arrow-right"></i>
            </button>
        </div>
    </a>
    <!-- /Promo Card 1 - White -->

    <!-- Promo Card 2 - White -->
    <a href="#" class="promo-card promo-card--white">
        <div class="promo-card__media"></div>
        <div class="promo-card__body">
            <div class="promo-card__title">Promo Title</div>
            <div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
        </div>

        <div class="promo-card__footer">
            <button class="btn btn-light">
                Lorem ipsum
                <i class="fa fa-long-arrow-right"></i>
            </button>
        </div>
    </a>
    <!-- /Promo Card 2 - White -->

    <!-- Promo Card 3 - White -->
    <a href="#" class="promo-card promo-card--white">
        <div class="promo-card__media"></div>
        <div class="promo-card__body">
            <div class="promo-card__title">Promo Title</div>
            <div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
        </div>

        <div class="promo-card__footer">
            <button class="btn btn-light">
                Lorem ipsum
                <i class="fa fa-long-arrow-right"></i>
            </button>
        </div>
    </a>
    <!-- /Promo Card 3 - White -->
</div>
<!-- /Promo Card - List -->

.promo-card {
  display: block;
  position: relative;
  padding: 2.4rem 2.4rem 4.8rem;
  width: 100%;
  min-height: 20rem;
  background-color: $color-blue-medium;
  color: $color-base-white;
  margin-bottom: 1.2rem;

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

  &.promo-card--light {
    background-color: $color-blue-light;
    color: $color-base-blue;
  }

  &.promo-card--white {
    background-color: $color-base-white;
    color: $color-base-blue;
    border: 1px solid $color-grey-light;
  }
}

a.promo-card:hover,
a.promo-card--light:hover {
  color: $color-base-white;
  text-decoration: none;
  background-color: $color-blue-dark;
}

a.promo-card--white:hover {
  border-color: $color-blue-medium;
  background-color: $color-base-white;
  color: $color-blue-medium;
}

.promo-card__title {
  @include typeHeadline(true);
  margin-bottom: 1.2rem;
}

.promo-card__image {
  float: right;
  border-radius: 50%;
  margin-left: 1.2rem;
  margin-bottom: 1.2rem;
}

.promo-card__body {
  margin-bottom: 1.2rem;
}

.promo-card__footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: right;

  .promo-card--white & {
    position: static;
    text-align: left;
  }

  .btn {
    outline: 0;
    background-color: $color-blue-dark;

    .promo-card--white & {
      color: $color-blue-medium;
      background-color: transparent;
      border: 0;
      padding: 0;
    }
  }
}

.promo-card-list {
  margin-bottom: 4rem;

  @media (min-width: $breakpoint-tablet) {
    display: flex;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  > .promo-card {
    @media (min-width: $breakpoint-tablet) {
      flex: 1 0 calc(33.3334% - 3.2rem);
      margin-left: 1.5rem;
      margin-right: 1.5rem;
    }
  }
}