.card {
  margin: 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  color: initial;
  text-decoration: none;
  transition: .2s background-color;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  border: solid 1px rgba(0, 0, 0, .125);
  border-radius: @borderRadius;
  .select-deny;

  &.flat {
    box-shadow: none;
  }

  .card-image {
    margin: 0;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    pointer-events: none;
    border-radius: @borderRadius @borderRadius 0 0;

    img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 50%;
    }

    .icon {
      width: 100px;
      height: 100px;
      font-size: 100px;
    }
  }

  .card-body {
    .card-title {
      margin: 0;
      padding: .3rem 0;
      display: flex;
      align-items: center;
      text-align: center;
      // font-size: 1.2rem;
    }

    .card-text {
      margin: .5rem 0 0;
    }
  }

  .card-header {
    // height: 5rem;
    margin: 0;
    // padding: .3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.2rem;
  }

  &[href]:hover {
    background: rgba(0, 0, 0, .06);
    color: initial;
    text-decoration: none;
  }

  &[href]:hover .card-header {
    text-decoration: underline;
  }

  @media @xs {
    margin: .5rem 0;
  }

  @media @md {
    margin: 1rem;
  }
}