.dg-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dg-gap);
  width: 100%;
  box-sizing: border-box;
}
.dg-cards .dg-cols-4 {
  flex: 1 1 calc(25% - var(--dg-gap));
  min-width: 14rem;
}
.dg-cards .dg-cols-2 {
  flex: 1 1 calc(50% - var(--dg-gap));
  min-width: 20rem;
}

.dg-card {
  background: var(--dg-bg-card);
  border: var(--dg-border-width) solid var(--dg-border);
  border-radius: var(--dg-radius-sm);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: var(--dg-text-main);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.dg-card .dg-text-subtle {
  align-self: flex-start;
  text-transform: uppercase;
}

.dg-cards.metrics-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--dg-gap);
  width: 100%;
  box-sizing: border-box;
}
.dg-cards.metrics-row .dg-card {
  flex: 1 1 20%;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dg-cards.metrics-row .dg-card:first-child {
  flex: 0 0 40%;
}