a{
  &.card{
    @include transition( opacity, .2s );
    display: block;
    color: color(dark-gray);
    font-weight: normal;
    margin-bottom:$spacing-medium;
    border-bottom: 5px solid color(ben-franklin-blue);
    font-size: rem-calc(13);
    background:color(ghost-gray);
    text-decoration: none;

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
      margin: 1rem 0;
      padding:0;
      color: color(dark-ben-franklin);
      background: transparent;
      font-size: 1rem;
    }
    > a {
      display: block;

      &:link,
      &:visited{
        color:color(ben-franklin-blue);
      }
    }

    &:hover{
      @extend %lower-opacity;
    }
    img {
      width:100%;
      height:auto;
    }
    .content-block{
      padding:1rem;
    }
    p{
      margin-bottom: 0;
    }
    .source{
      display: block;
      padding:.5rem 0;
    }

    //TODO: Remove sub-topic, leaving it in now for backwards compatibility
    &.sub-topic,
    &.card--overview{
      text-decoration: none;
      background: rgba( color(light-ben-franklin), .3 );
      border-bottom: none;

      @media screen and (min-width: 40em) {
        margin-bottom:$spacing-extra;
      }

      .content-block{
        padding: 1.5rem;
      }
      h1, h2, h3, h4, h5, h6,
      .h1, .h2, .h3, .h4, .h5, .h6 {
        margin:0;

      }
      &::before {
        content: '';
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid $white;
        position: absolute;
        margin-top: 1.5rem;
      }
    }
    //TODO: Remove action-panel, leaving it in now for backwards compatibility
    &.action-panel,
    &.card--action {
      color: $dark-gray;
      font-weight: normal;
      border-bottom: 0;
      text-decoration: none;

      hr + .content-block{
        padding-top:0;
      }

      header {
        color: color(dark-ben-franklin);
        font-weight: 700;
        text-align: center;
        .fa-circle {
          color: color(bell-yellow);
        }
      }
      @media only screen and (min-width: 64em) {
        margin-bottom: 0;
      }
    }
  }
}