Bourbon Neat grid-push not working as expected?

I have a really simple issue that seems to be difficult to solve. I want to stick with the normal standard 12 column neat grid, but I want the two .homeSplit divs to take up 5 columns each. I would like the second one(.insights) to get 1col of space in the middle so I gave it a grid-push(1). When it gets to mobile sizes, I want each of these divs to take up the full 12 columns and stack on top of each other. The issue is that once I get down to mobile size, that 1col space I assigned with grid-push(1) is persisting and I can't figure out how to get rid of it.

CSS/SASS:

.homeSplit {
    position: relative;
    @include grid-column(5);

&.news {

    .post {
        margin-bottom: 26px;
    }
}
&.insights {
    @include grid-push(1);
    padding-left: 30px;
    z-index: 999;

    .post {
        margin-bottom: 26px;
    }
}
}

    @media only screen and (max-width: 959px) {
    .homeSplit {
        @include grid-column(12);

        &.insights {
            @include grid-push(0);
        }
    }

}

I have tried grid-push(-1) as well but it goes too far. Am I misunderstanding how to use Neat? Pulling my hair out over here.

The best path here would be to use the grid-media() mixin to have a series of grids. Here is an example of what that would look like (with some of the extraneous code removed.

Also, neat by default favors min-width over max-width in media queries. based on your layout, min-width makes things a lot easier.

$my-desktop-grid: (
  media: 959px,
);

.homeSplit {
    @include grid-column(); // default's to 12 here

    @include grid-media($my-desktop-grid) {
        @include grid-column(5);

        &.insights {
            @include grid-push(1);
        }
    }
}

I've created a codepen as an example so you can see what this looks like in action.

https://codepen.io/whmii/pen/aVvqma