Two images with identical physical pixel height are having an offset in height.

Question

The reason for the difference in images' heights

The reason for the difference in images' heights is mathematical.

For simplicity, let's have a look at the following column system:

@include add-grid(4);
@include add-gutter(0.1);

The above definition means: four columns of identical width, and between them three (4 - 1) gutters. Each gutter has the width equal to 0.1 width of any column.

Now, given that the width of the container is 1000 px, what will be the width of every column and every gutter?

Let's say that a column is x px wide. Then a gutter will be 0.1x px wide. We can assemble an equation:

4x + 3*(0.1x) = 1000

Let's solve it:

4x + 0.3x = 1000
4.3x = 1000
x = 1000 / 4.3
x = 232.56

Every column is ~232.56px wide! And every gutter is 232.56 * 0.1 = 23.256px wide.

Now, let's say we've got two images: 250x250 px and 750x250 px, and we put them into these columns.

The first image will occupy one column and zero gutters. It's width and height will both be equal to 232.56 px.

The second image will occupy three columns and two gutters between those columns. It's width will be equal to 232.56 * 3 + 23.256 * 2 = 744.192px. The height of the second image will be equal to 250 * 744.192 / 750 = 248.064px.

As you can see, the images' heights don't match, and this is expected.

A solution for the problem

You could use a compound grid to compensate for the difference in heights. This is way more difficult to calculate.

A simpler solution is to slice your images to match your existing grid!

General recommendations for your grid layout.

You use a lot of grid definitions for different breakpoints but across all of them (except for the mobile view), you have the same layout.

You don't have to redefine grids for every breakpoint. In fact, your responsive layout can be reduced to this definition:
```
+add-grid(3);
+add-gutter(0.5);
```
For the mobile layout, don't apply any spans. For the layouts starting with the smallest breakpoint, apply the spans and you're good to go.

Note that you can still apply multiple breakpoints for other styles, e. g. container width.
For the isolation spanning to work with multiple rows, apply clearing for the first child in every row:
```
&:nth-child(3n+1) { clear: both; }
```
Note: this should be done AFTER applying a Singularity span mixin, e. g.:
```
&:nth-child(3n+1) {
  +grid-span(1,1);
  clear: both;
}
```
You can use the common grid-span mixin instead of the specific isolation-span. Isolation is the default spanning technique for the grid-span mixin.
Don't override direction and gutters for every mixin call unless you're trying to position elements off the declared grid.
Don't use varying gutter sizes for adjacent elements, otherwise it will ruin the math.
Don't apply duplicate styles under every media query. Ideally, every CSS rule should be declared only once. You can create more specific media query rules if necesary instead of duplicating styles.
UPD: Oh, and remember that you can declare columns and guttters in the following format:
```
+add-grid(235 235 235 235);
+add-gutter(20);
```
This is identical to +add-grid(4); +add-gutter(0.085); but makes comprehending the numbers much easier.