.coblocks-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 * 0.5)}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 } {

			.coblocks-gallery--figure {
				margin: #{round($i * 5 * 0.5)}px;
			}
		}
	}
}
@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 * 0.5)}px !important;
			max-width: calc(100% + #{round($i * 5)}px) !important;

			.coblocks-gallery--figure {
				margin: #{round($i * 5 * 0.5)}px;
			}
		}
	}
}
