.dt-metric-strip {
  background: var(--dt-color-surface);
  border: 1px solid var(--dt-color-border);
  border-radius: var(--dt-radius-lg);
  display: grid;
  grid-template-columns: repeat(var(--dt-metric-count, 4), minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
}

.dt-metric-strip__item {
  border-right: 1px solid var(--dt-color-border);
  min-width: 0;
  padding: var(--dt-space-panel);
}

.dt-metric-strip__item:last-child {
  border-right: 0;
}

.dt-metric-strip dt {
  color: var(--dt-color-text-muted);
  font-family: var(--dt-font-compact);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dt-metric-strip dd {
  color: var(--dt-metric-color, var(--dt-color-text));
  font-family: var(--dt-font-editorial);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  margin: 0.625rem 0 0;
}

.dt-metric-strip__item > span {
  color: var(--dt-color-text-muted);
  display: block;
  font-size: 0.75rem;
  margin-top: 0.375rem;
}

.dt-metric-strip__item--positive { --dt-metric-color: var(--dt-color-success); }
.dt-metric-strip__item--negative { --dt-metric-color: var(--dt-color-danger); }
.dt-metric-strip__item--warning { --dt-metric-color: var(--dt-color-warning); }

@media (max-width: 48rem) {
  .dt-metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dt-metric-strip__item:nth-child(2n) {
    border-right: 0;
  }

  .dt-metric-strip__item:nth-child(n + 3) {
    border-top: 1px solid var(--dt-color-border);
  }
}

@media (max-width: 30rem) {
  .dt-metric-strip {
    grid-template-columns: 1fr;
  }

  .dt-metric-strip__item {
    border-right: 0;
  }

  .dt-metric-strip__item + .dt-metric-strip__item {
    border-top: 1px solid var(--dt-color-border);
  }
}