.cards {
  $card-border-color: $base-border-color;
  $card-border: 1px solid $card-border-color;
  $card-color: lighten($card-border-color, 10);
  $card-header-color: $card-color;
  $card-hover-color: darken($card-color, 5);

  @include clearfix;
  cursor: pointer;
  margin-bottom: 1em;

  .card {
    height: 190px;
    border: $card-border;
    background-color: $card-color;
    border-radius: $base-border-radius;
    margin-bottom: $base-line-height;

    @include media($medium-screen) {
      @include span-columns(4 of 12);
    }

    .card-header {
      background-color: $card-header-color;
      border-bottom: $card-border;
      border-top-left-radius: $base-border-radius;
      border-top-right-radius: $base-border-radius;
      font-weight: bold;
      padding: 0.5em 1em;
    }

    .card-content {
      padding-left: 1em;
      padding-right: 1em;
      padding-top: 1em;
      
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
      }  
    }

    h3 {
      font-weight: 800;
    }

    &:hover {
      background-color: $card-hover-color;
      .card-header {
        background-color: $card-hover-color;
      }
    }

    &:active {
      background-color: $card-color;
      .card-header {
        background-color: $card-color;
      }
    }
  }
}