Wordpress Gutenberg Gallery Block Gutter Styles

_wp-block-gallery.scss

$wp-block-gallery-classes: (
    '': 20px,
    '.has-no-gutters': 0,
    '.has-large-gutters': 50px,
);

@each $class, $gutter in $wp-block-gallery-classes {
    #{$class}.blocks-gallery-grid,
    .wp-block-gallery#{$class} {

        .blocks-gallery-image,
        .blocks-gallery-item {
            margin: 0 $gutter $gutter 0;
            width: calc((100% - #{$gutter})/2);

            &:nth-of-type(2n) {
                margin-right:0;
            }

        }

        @media (min-width:600px) {

            @for $i from 3 through 8 {
                &.columns-#{$i} .blocks-gallery-image,
                &.columns-#{$i} .blocks-gallery-item {
                    width: calc((100% - #{$gutter * ($i - 1)})/#{$i});
                    margin-right: $gutter;
                }
                @supports (-ms-ime-align:auto) {
                    &.columns-#{$i} .blocks-gallery-image,
                    &.columns-#{$i} .blocks-gallery-item {
                        width: calc((100% - #{$gutter * ($i - 1)})/#{$i} - 1px);
                    }
                }
            }

            @for $i from 1 through 8 {
                &.columns-#{$i} .blocks-gallery-image:nth-of-type(#{$i}n),
                &.columns-#{$i} .blocks-gallery-item:nth-of-type(#{$i}n) {
                    margin-right:0;
                }
            }

        }

        .blocks-gallery-image:last-child,
        .blocks-gallery-item:last-child {
            margin-right: 0;
        }

    }

}