@import (reference) "fonts";

@card--padding: 16px;

.card-style {
  background-color: @color--white;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
  padding: @card--padding;
  border-radius: 3px;
}

.card {
  .card-style;
  display: flex;
  flex-direction: column;

  max-width: 235px;
  width: calc(~"100% - 20px");
  margin: 20px auto;
  padding: @card--padding;
  position: relative;
  overflow: hidden;

  &__name, &__title {
    .font--header;
    word-wrap: break-word;
  }

  &__description { .content--small; }

  &__caption { .card__caption; }

  &__extra { align-self: flex-end; }
}

.card__caption {
  .content--small;
  color: @color--gray-light;
}