Graphics that scale like an image

An illustration exported as a PNG scales perfectly and can't be touched. The same illustration built as divs can be recoloured, swapped and animated, but falls apart when it scales — text reflows, padding stays put, corners stop matching. This gets both: one artboard that scales as a unit, made of real elements.

The whole technique is three rules.

.graphic {
  container-type: inline-size;   /* 1cqw now means 1% of this box */
  aspect-ratio: 16 / 9;          /* height follows width, so it scales as one */
  position: relative;
}