/*
 * A label and three right-aligned figures — last value, absolute change,
 * relative change (shared/_price_change). The homepage's index and futures
 * strips and the sidebar watchlist.
 */
@layer components {
  .price-change {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    font-size: var(--text-ui);
  }

  .price-change__label {
    flex: none;
    inline-size: 5rem;
  }

  .price-change__figures {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
    text-align: end;
  }
}