Susy: Temporarily modify gutter settings using With-Layout

I have two seperate images right next to one another, and I want them to be contiguous. The problem is that I need to move the right-most image over to the left. I could use the size modifiers for the span mixin (narrow | wide ) but that would change the proportions of the two respective images in relation to one antoher.

Instead I need to move the second image in the flow over to the left by temporarily removing the gutter.

I read from his old post here: https://stackoverflow.com/a/13044025 that I can use with-grid-settings, which is now with-layout.

However there doesn't seem to be any documentation on how to accomplish this particular action.

What would be the proper way to execute such a task?

Thanks in advance

--EDIT--

HTML (Simplified)

<main id="grid">
 <section id="main_background_container">
     <img id="main_side_img"></img>
     <div id="main_primary_container"></div>
 </section>
</main>

SCSS

#grid{
@include container(8);
@include background-grid;
}
#main_background_container{
@extend %debug;
@include span(8);
height: auto;
float: right;
margin-top:-16px;
}  
#main_side_img{
height: 65%;    
@include span(1 no gutter);
}
#main_primary_container{
@include span(4 wide);
background-image: url('../images/background-2b.png');
background-position: top;
background-size: cover;
height: 65%;
}

The with-layout mixin accepts any layout definition using a settings-map, or the shorthand syntax, or any combination of the two — similar to other Susy mixins. But I don't think that's what you want. Changing the gutter size actually changes the grid math, and your elements wont align. I think you want something like this (I'm making things up, since I can't see your code):

.left-area {
  @include span(3 no-gutter); // remove the gutter here
}

.right-area {
  @include span(9 wide); // span across what would have been the gutter
}