.cards {
  display: flex;
  flex-wrap: wrap;
  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;
  $action-color: #477DCA !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-margin: 0.5em;
  $card-image-hover-opacity: 0.7;
  $card-image-hover-color: #F8F2B4;

  background-color: $card-background;
  border: $card-border;
  border-radius: $base-border-radius;
  flex-basis: 15em;
  flex-grow: 1;
  margin: 0 $card-margin $base-spacing $card-margin;
  position: relative;
  transition: all 0.2s ease-in-out;

  .card-image {
    background-color: $card-image-hover-color;
    height: 150px;
    max-height: 150px;
    overflow: hidden;

    img {
      @include border-top-radius($base-border-radius);
      opacity: 1;
      transition: all 0.2s ease-in-out;
      width: 100%;
    }
  }

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

  .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 {
    img {
      opacity: $card-image-hover-opacity;
    }
  }

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

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