.card {
  @include shadow;
  @include color('border-color', 'muted-light');
  backface-visibility: hidden;
  border-style: solid;
  border-width: 2px;
  display: flex;
  flex-direction: column;
  position: relative;
  will-change: transform;
  word-wrap: break-word;

  &:hover {
    @include shadow(hover);
  }

  .card-header,
  .card-footer {
    @include color('background-color', 'white-dark');
    @include color('border-color', 'muted-light');
    padding: 0.75rem 1.25rem;
  }

  .card-header {
    border-bottom-style: solid;
    border-bottom-width: 2px;
  }

  .card-footer {
    border-top-style: solid;
    border-top-width: 2px;
  }

  .card-body {
    flex: 1 1 auto;
    padding: 1.25rem;

    .card-title,
    h4 {
      margin-bottom: 0.5rem;
      margin-top: 0;
    }

    .card-subtitle,
    h5 {
      color: $secondary;
      margin-bottom: 0.5rem;
      margin-top: 0;
    }

    .card-text,
    p {
      margin-bottom: 1rem;
      margin-top: 0;
    }

    .card-link + .card-link,
    a + a {
      margin-left: 1.25rem;
    }
  }

  .image-top,
  .image-bottom,
  img {
    border: 0;
    border-radius: 0;
  }
}