/* Comparison-only hotfix: size the grid and values by their containers. */
.heat-page .hp-progress { container: pump-comparison / inline-size; }
.heat-page .hp-progress-grid { grid-template-columns: minmax(0, 1fr); }
.heat-page .hp-progress-grid article { container: comparison-card / inline-size; }
.heat-page .hp-progress-grid .hp-shift {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: center;
  gap: 10px;
  min-height: 150px;
  margin: 32px 0 28px;
  white-space: normal;
  line-height: 1.15;
}
.heat-page .hp-progress-grid .hp-shift b,
.heat-page .hp-progress-grid .hp-shift strong { white-space: nowrap; }
.heat-page .hp-progress-grid .hp-shift b { font-size: clamp(1.75rem, 10cqi, 2rem); }
.heat-page .hp-progress-grid .hp-shift strong { font-size: clamp(2rem, 12cqi, 2.5rem); }
.heat-page .hp-progress-grid .hp-shift i { font-size: 1.5rem; line-height: 1; }
.heat-page .hp-progress-grid .hp-shift.text b,
.heat-page .hp-progress-grid .hp-shift.text strong { font-size: 1.5rem; }
@container pump-comparison (min-width: 36rem) {
  .heat-page .hp-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container pump-comparison (min-width: 70rem) {
  .heat-page .hp-progress-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container comparison-card (min-width: 22rem) {
  .heat-page .hp-progress-grid .hp-shift { grid-template-columns: max-content max-content max-content; align-items: center; }
}