.cards {
  @include typescale('xs');
  margin-bottom: 2rem;

  img {
    margin: 0;
    transition: all 0.3s;
  }

  .card--inner {
    margin: 1rem 0 2rem;

    h6 {
      margin: 0 0 1rem;

      + .date {
        margin-top: -0.8rem;
      }
    }
  }

  a.card, a.card:visited {
    text-decoration: none;
    color: $navy;

    h6 {
      color: $heading-link-color;
    }

    &:hover {
      h6 {
        color: $primary;
      }
    }
  }

  .card a {
    h6 {
      color: $heading-link-color;
    }

    &:hover {
      h6 {
        color: $primary;
      }
    }
  }
}

.grid--flush {
  &.cards {
    .card--inner {
      margin: 1rem math.div($grid-gutter, 2) 2rem;
    }
  }
}

.card-img {
    display: block;
    overflow: hidden;
}

a, a:visited {
  &:hover {
    .card-img {
      box-shadow: 0 1px 0 0 #fff, 0 4px 0 0 $magenta;

      > img {
        transform: scale(1.1);
      }

    }

  }
}

.tags {
  list-style: none;
  padding: 0;

  li {
    display: inline;

    a, a:visited {
      text-decoration: none;
      background: $grey--lightest;
      padding: 0.05em 0.5em;
      color: $navy;
      border-radius: 0.2rem;

      &:hover {
        color: #000;
        background: darken($grey--lightest, 5%);
      }
    }
  }
}