The pixel misalignment is likely due to sub-pixel rendering caused by the image height not aligning with the base grid (e.g., 4px). When an image has a height that’s not divisible by the grid size, or lacks display: block, it can introduce small layout shifts, especially in combination with default margins on <figure>. To fix this, explicitly set the image height to a multiple of your grid unit, use img { display: block; margin: 0; }, and ensure all related CSS variables affecting gradient position are consistent.