.summary article {
  padding: 22px;
}

.summary-card {
  min-height: 154px;
  display: flex;
  flex-direction: column;
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(26, 58, 52, 0.09);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(26, 58, 52, 0.13);
}

.summary-card span {
  font-weight: 750;
}

.summary-card strong {
  margin: 26px 0 5px;
}

.summary-card small {
  margin-top: auto;
}

.summary-available {
  background: #0d4038;
  color: #fff;
}

.summary-available span,
.summary-available small {
  color: #c7ddd8;
}

.summary-available strong {
  color: #fff;
}

.summary-payable {
  background: #fff1eb;
  border-color: #efd8ce;
}

.summary-payable span {
  color: #7a4635;
}

.summary-payable small {
  color: #a84a32;
}

.summary-receivable {
  background: #e8f4ef;
  border-color: #cfe4db;
}

.summary-receivable span {
  color: #315f52;
}

.summary-receivable small {
  color: #297760;
}

.summary-projected {
  background: #f1e7cc;
  border-color: #e4d8b8;
}

.summary-projected span,
.summary-projected small {
  color: #6c6246;
}

@media (prefers-reduced-motion: reduce) {
  .summary-card {
    transition: none;
  }

  .summary-card:hover {
    transform: none;
  }
}