.cards {
  @include display(flex);
  @include flex-wrap(wrap);
  @include justify-content(space-between);
}

.card {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-background-color: white !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $base-font-color: $dark-gray !default;
  //////////////////////////////////////////////////////////////////////////////////

  $card-border-color: $base-border-color;
  $card-border: 1px solid $card-border-color;
  $card-background: lighten($card-border-color, 10%);
  $card-header-background: $card-background;
  $card-hover-background: lighten($card-background, 5%);
  $card-image-background: #DBD199;
  $card-image-hover-background: lighten($card-image-background, 5%);
  $card-margin: 1em;

  @include flex-basis(15em);
  @include flex-grow(1);
  @include transition (all 0.2s ease-in-out);
  background-color: $card-background;
  border-radius: $base-border-radius;
  border: $card-border;
  box-shadow: 0 2px 4px darken($base-background-color, 10%);
  cursor: pointer;
  margin: 0 $card-margin $base-spacing $card-margin;
  position: relative;
  position: relative;

  .card-image {
    overflow: hidden;
    max-height: 150px;

    img {
      @include transition (all 0.2s ease-in-out);
      background: $card-image-background;
      border-top-left-radius: $base-border-radius;
      border-top-right-radius: $base-border-radius;
      width: 100%;
    }
  }

  .card-header {
    @include transition (all 0.2s ease-in-out);
    background-color: $card-header-background;
    border-bottom: $card-border;
    border-radius: $base-border-radius $base-border-radius 0 0;
    font-weight: bold;
    line-height: 1.5em;
    padding: ($base-spacing / 3) ($base-spacing / 2);
  }

  .card-copy {
    font-size: 0.9em;
    line-height: 1.5em;
    padding: ($base-spacing / 2) ($base-spacing / 2);

    p {
      margin: 0 0 ($base-spacing / 2);
    }
  }
  
  &:focus,
  &:hover {
    background-color: $card-hover-background;
    
    .card-image img {
      background: $card-image-hover-background;
    }
  
    .card-header {
      background-color: $card-hover-background;
    }
  }

  &:active {
    background-color: $card-background;

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