@mixin gutter-margin($margin) {

	> .block-editor-inner-blocks > .block-editor-block-list__layout > [class*="wp-block"]:not(:last-child) {
		margin-bottom: $margin;
	}
}

@include break-small-max() {

	.has-responsive-columns {

		> .block-editor-inner-blocks > .block-editor-block-list__layout {
			flex-direction: column;

			> .wp-block {
				max-width: 100% !important;
				width: 100% !important;
			}
		}

		> * {
			max-width: 100% !important;
			width: 100% !important;
		}

		&.has-no-gutter {

			@include gutter-margin(0);
		}

		&.has-small-gutter {

			@include gutter-margin(calc(var(--coblocks-spacing--1, #{map-get($spacing, 1)}) * 2.35));
		}

		&.has-medium-gutter {

			@include gutter-margin(calc(var(--coblocks-spacing--1, #{map-get($spacing, 2)}) * 2.35));
		}

		&.has-large-gutter {

			@include gutter-margin(calc(var(--coblocks-spacing--1, #{map-get($spacing, 3)}) * 2.35));
		}

		&.has-huge-gutter {

			@include gutter-margin(calc(var(--coblocks-spacing--1, #{map-get($spacing, 4)}) * 2.35));
		}

		&.has-custom-gutter {

			@include gutter-margin(calc(var(--coblocks-custom-gutter, 0) * 2.35));
		}

	}
}
