.metric-card{
  --stat-color:var(--md-brand-foreground-1-rest);
  background:var(--card-bg);
  padding:28px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}
.metric-card .stat-value{ font-family:var(--font-display); font-weight:var(--font-weight-light); font-size:var(--md-typography-font-size-800); line-height:40px; color:var(--stat-color); display:inline-block; width:fit-content; max-width:100%; outline:none; }
.metric-card .stat-label{ font-family:var(--font-sans); font-weight:var(--font-weight-light); font-size:var(--md-typography-font-size-500); line-height:28px; color:var(--label-color); display:inline-block; width:fit-content; max-width:100%; outline:none; }
.metric-card .stat-description{ font-family:var(--font-sans); font-weight:var(--font-weight-light); font-size:var(--md-typography-font-size-300); line-height:16px; color:var(--md-neutral-foreground-1-rest); display:inline-block; width:fit-content; max-width:100%; outline:none; margin-top:2px; white-space:pre-wrap; }
.metric-card .stat-description:empty{ display:none; }
.metric-card[data-row="1"] .stat-description{ display:none; }
.metric-card[data-size="L"] .stat-value{ font-size:var(--md-typography-font-size-1000); line-height:76px; }
.metric-card[data-size="L"] .stat-label{ font-size:var(--md-typography-font-size-800); line-height:40px; font-family:var(--font-display) }
.metric-card[data-size="L"] .stat-description{ font-size:var(--md-typography-font-size-600); line-height:32px; }
.metric-card[data-size="L"]{ padding:36px 20px; }
.metric-card[data-style="accent"]{ --card-bg:var(--md-brand-background-inverted-rest); --stat-color:var(--md-color-grey-white); --label-color:var(--md-color-grey-white); }
.metric-card[data-style="accent"] .stat-description{ color:rgba(255,255,255,0.72); }