.metric-strip-container { container-type: inline-size; margin: 18px 0; }
.metric-strip {
  --panel: #fafbf6;
  --digits: #193b30;
  --label: #52685f;
  --divider: #d6dfd8;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);
  background: var(--panel);
  color: var(--digits);
  border: 1px solid var(--divider);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 12px #122b2210;
}
[data-theme="dark"] .metric-strip {
  --panel: #1b282a;
  --digits: #ecf2ed;
  --label: #b2c3bb;
  --divider: #3d4e4d;
}
.metric-strip > div { position: relative; isolation: isolate; align-content: center; padding: 10px 16px; }
.metric-strip > div:first-child {
  --digits: #f6faf3;
  --label: #d3e9dc;
  background: #335b4c;
  overflow: hidden;
}
.metric-strip > div:first-child::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: repeating-radial-gradient(ellipse 115px 190px at 133% -16%, transparent 0 9px, #c6ecd623 10px 11px, transparent 12px 18px);
  mask-image: linear-gradient(110deg, transparent 35%, black 90%);
}
.metric-strip > div:last-child { border-inline-start: 1px solid var(--divider); }
.metric-strip dt { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--label); }
.metric-strip dt svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.metric-strip dd {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .22em;
  margin: 6px 0 0; color: var(--digits);
  font-size: clamp(23px, 4.9cqw, 36px);
  font-weight: 680; line-height: 1.18; letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.metric-strip > div:first-child dd { font-size: clamp(34px, 7cqw, 52px); }
.metric-strip dd span { white-space: nowrap; }
.metric-strip .metric-unit { font-size: .7em; color: inherit; font-weight: 450; letter-spacing: -.035em; }
@container (max-width: 540px) {
  .metric-strip { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
  .metric-strip > div { padding: 10px 14px; }
  .metric-strip > div:first-child { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .metric-strip > div:first-child dd { margin: 0; }
}