Change masonry grid gap size

Hello
I’ve looked at a ton of other posts and can’t quite get this to work properly.

I’m using a fullwidth 3 column masonry grid with a large gap. I’ve made the masonry background bright green to show the positioning, plus orange for the container, again to see how things are being displayed.

I want to change the default 10px masonry that is green to 8px for the top and bottom (to match the 3 col grid I’m using above), and 0px left and right, and also fullwidth for the left and right 3 column images stretch right to full width to hide the green band at left, and the smaller bit of red band for the images on the right.

I also tried making it a no gap masonry but couldn’t get each box to have a border of 8px for right and bottom, which I hoped could work because then the grid is fullwidth.

Please advise; I’ve spent ages trying to get this to be full width and work – here’s some of my attempts! Thanks :)

.main_color .av-masonry {
background-color: #33cc00;
/* margin-left: -10px; */
}

.av-masonry-entry .av-inner-masonry-content {
background: rgba(255,255,255,0) !important;
}

.av-masonry-container {
background-color: #ff3300;
/* background-color: transparent;
border-bottom: 8px #2ed900 solid !important;
border-top: 8px #2ed900 solid !important; */
}

.av-masonry-entry:nth-child(1) {
/* border-left: 18px #fff solid;
border-right: 8px #fff solid; */
}

.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
/* margin-right: 8px;
margin-bottom: 8px; */
}