.has-small-gutter {

	&.has-2-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 2 - var(--coblocks-spacing--1, #{map-get($spacing, 1)}));
	}

	&.has-3-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 3 - var(--coblocks-spacing--2, #{map-get($spacing, 2)}));
	}

	&.has-4-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 2 - var(--coblocks-spacing--1, #{map-get($spacing, 1)}));

		@include break-large() {
			max-width: calc(100% / 4 - var(--coblocks-spacing--2, #{map-get($spacing, 2)}));
		}

		&:nth-of-type(1),
		&:nth-of-type(2) {

			@include break-large-max() {
				margin-bottom: calc(2 * var(--coblocks-spacing--1, #{map-get($spacing, 1)}));
			}
		}
	}
}

.has-medium-gutter {

	&.has-2-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 2 - var(--coblocks-spacing--2, #{map-get($spacing, 2)}));
	}

	&.has-3-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 2.975 - var(--coblocks-spacing--3, #{map-get($spacing, 3)}));
	}

	&.has-4-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 2 - var(--coblocks-spacing--2, #{map-get($spacing, 2)}));

		@include break-large() {
			max-width: calc(100% / 4 - var(--coblocks-spacing--3, #{map-get($spacing, 3)}));
		}

		&:nth-of-type(1),
		&:nth-of-type(2) {

			@include break-large-max() {
				margin-bottom: calc(2 * var(--coblocks-spacing--2, #{map-get($spacing, 2)}));
			}
		}
	}
}

.has-large-gutter {

	&.has-2-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 2.01 - var(--coblocks-spacing--3, #{map-get($spacing, 3)}));
	}

	&.has-3-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 3.03 - var(--coblocks-spacing--4, #{map-get($spacing, 4)}));
	}

	&.has-4-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 2 - var(--coblocks-spacing--3, #{map-get($spacing, 3)}));

		@include break-large() {
			max-width: calc(100% / 4.08 - var(--coblocks-spacing--4, #{map-get($spacing, 4)}));
		}

		&:nth-of-type(1),
		&:nth-of-type(2) {

			@include break-large-max() {
				margin-bottom: calc(2 * var(--coblocks-spacing--3, #{map-get($spacing, 3)}));
			}
		}
	}
}

.has-huge-gutter {

	&.has-2-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 2.02 - var(--coblocks-spacing--4, #{map-get($spacing, 4)}));
	}

	&.has-3-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 3.09 - var(--coblocks-spacing--5, #{map-get($spacing, 5)}));
	}

	&.has-4-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 2 - var(--coblocks-spacing--4, #{map-get($spacing, 4)}));

		@include break-large() {
			max-width: calc(100% / 4.15 - var(--coblocks-spacing--5, #{map-get($spacing, 5)}));
		}

		&:nth-of-type(1),
		&:nth-of-type(2) {

			@include break-large-max() {
				margin-bottom: calc(2 * var(--coblocks-spacing--4, #{map-get($spacing, 4)}));
			}
		}
	}
}

.has-custom-gutter {

	&.has-2-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 2 - var(--coblocks-custom-gutter, 0));
	}

	&.has-3-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 3 - var(--coblocks-custom-gutter, 0));
	}

	&.has-4-columns > *:not(.block-editor-inner-blocks) {
		max-width: calc(100% / 2 - var(--coblocks-custom-gutter, 0));

		@include break-large() {
			max-width: calc(100% / 4 - var(--coblocks-custom-gutter, 0));
		}

		&:nth-of-type(1),
		&:nth-of-type(2) {

			@include break-large-max() {
				margin-bottom: calc(2 * var(--coblocks-custom-gutter, 0));
			}
		}
	}
}
