.responsive-block-editor-addons-gallery.has-gutter {
  overflow: hidden;
}

@include break-small() {
  // Add negative margin to the parent ul to offset the gutter.
  @for $i from 1 through 10 {
    .has-gutter-#{ $i * 5 } {
      margin: -#{round($i * 5 / 2)}px !important;
      max-width: calc(100% + #{round($i * 5)}px) !important;
    }
  }

  // Add gutter margin to the figure elements.
  @for $i from 1 through 10 {
    .has-gutter-#{ $i * 5 } {
      .responsive-block-editor-addons-gallery--figure {
        margin: #{round($i * 5 / 2)}px !important;
      }
    }
  }
}

@include break-small-max() {
  // Add gutter margin to the figure elements.
  @for $i from 1 through 10 {
    .has-gutter-mobile-#{ $i * 5 } {
      margin: -#{round($i * 5 / 2)}px !important;
      max-width: calc(100% + #{round($i * 5)}px) !important;

      .responsive-block-editor-addons-gallery--figure {
        margin: #{round($i * 5 / 2)}px;
      }
    }
  }
}