`image` breaks `.gl-baseline-grid` (with background squares)

[badlydrawnrob]

At first I thought it was line-height issue but some elements can break the grid ...

The image inside <figure> breaks formatting as (probably) it's not divisible by 4px. This could be the case for any element that doesn't adhere to the grid, so you've got to be very careful with measurements.

It's also a good idea to make sure you reset elements. <figure> has these styles in inspector (but thankfully they seem to be ignored, even if they aren't struck out):

/* user agent settings */
figure {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
}