Looks like you'll have to max out your .stepImages elements width (which, in turn, will limit their corresponding heights) at 401px in order to fit three images on the same page.
There are a ton of page-break-inside and page-break-after rules which makes the exact logic hard to follow. If you're really interested in squeezing every little pixel of height out of your images maybe try multiple columns as I think the issue is your .stepText rules are kicking in and thereby causing some of those page-break rules which is in turn causing your step title to get bumped up to the previous page.