.highlight-price { display: inline-grid; grid-template-columns: auto 1.08em; grid-template-rows: .55em .35em; column-gap: .015em; align-items: start; color: var(--green); font-size: clamp(2.8rem, 16cqi, 4.2rem); font-variant-numeric: tabular-nums; line-height: .9; letter-spacing: -.055em; font-weight: 800; margin: 0; white-space: nowrap; }
.highlight-price__euros { grid-column: 1; grid-row: 1 / 3; }
.highlight-price__cents { grid-column: 2; grid-row: 1; justify-self: center; font-size: .55em; letter-spacing: -.025em; line-height: 1; }
.highlight-price__unit { grid-column: 2; grid-row: 2; align-self: end; justify-self: center; font-size: .24em; line-height: 1; font-weight: 650; letter-spacing: 0; text-align: center; text-transform: uppercase; }
.highlight-price--long { font-size: clamp(1.8rem, 10cqi, 2.8rem); }

/* Trim the font leading so euros and cents share the same visible cap top. */
@supports (text-box-trim: trim-both) {
  .highlight-price__euros, .highlight-price__cents { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
}