.metric-trend {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .65rem;
  align-items: center;
  margin-top: 1.25rem;
}

.metric-trend > span {
  grid-row: 1 / 3;
  font-size: 2rem;
  line-height: 1;
}

.metric-trend strong {
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.1;
}

.metric-trend small {
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.metric-trend.steady > span,
.metric-trend.steady strong,
.chart-trend.steady > span,
.chart-trend.steady strong {
  color: var(--text);
}

.metric-trend.up > span,
.metric-trend.up strong,
.chart-trend.up > span,
.chart-trend.up strong {
  color: #79c995;
}

.metric-trend.down > span,
.metric-trend.down strong,
.chart-trend.down > span,
.chart-trend.down strong {
  color: #e36f4d;
}

@media (max-width: 680px) {
  .metric-trend {
    margin-top: .25rem;
    gap: 0 .5rem;
  }

  .metric-trend > span {
    font-size: 1.45rem;
  }

  .metric-trend strong {
    font-size: .88rem;
  }

  .metric-trend small {
    font-size: .7rem;
  }
}