.card__header {
  background-size: cover;
  background-position: center;
  background-repeat: repeat-none;
}
.card__header--black {
  background-color: #605f5f;
  color: #f4f5f5;
}
.card__header--blue {
  background-color: #388cbf;
  color: #f4f5f5;
}
.card__header--gray {
  background-color: #e2e8ec;
  color: #4a4a4a;
}
.card__header--green {
  background-color: #5ee6a5;
  color: #408665;
}
.card__header--orange {
  background-color: #ffbc89;
  color: #b5792b;
}
.card__header--purple {
  background-color: #d08bfa;
  color: #3f0658;
}
.card__header--red {
  background-color: #e32d2d;
  color: #ffe3e3;
}
.card__header--yellow {
  background-color: #fffba4;
  color: #7d7945;
}
.card__content,
.card__footer,
.card__header--white {
  background-color: #fff;
  color: #949494;
}
.card__b-img {
  position: absolute;
  top: 0;
  left: 0;
}
.card__b-img {
  width: 100%;
}
.card__header {
  position: relative;
}
.card__content,
.card__footer,
.card__header {
  display: block;
}
.card__content.card__content--unpadded,
.card__footer.card__footer--unpadded {
  padding: 0;
}
.card__content,
.card__footer,
.card__header {
  padding: 1em;
}
.card {
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.08);
  border-radius: 3px/5px;
  overflow: hidden;
  transition: 0.3s box-shadow ease-out;
}
.card:hover {
  box-shadow: 0 0 5px 1px rgba(0,0,0,0.13);
}
.card__b-img {
  transform: translate(-50%);
}
.card__header.card__header--tall {
  border-radius: 5px;
  min-height: 15vw;
}
.card__header.card__header--unpadded {
  padding: 0;
}