.wp-block-coblocks-services {

	&[data-columns] {

		@include break-small() {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		@include break-small() {
			&[data-columns="2"] > .wp-block-coblocks-service {
				flex-basis: 50%;
				max-width: calc(100% / 2 - var(--coblocks-spacing--2, #{map-get($spacing, 2)}));
			}

			&[data-columns="3"] > .wp-block-coblocks-service {
				flex-basis: 33.333%;
				max-width: calc(100% / 3 - var(--coblocks-spacing--2, #{map-get($spacing, 2)}));
			}
		}

		@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-wide) }) {
			&[data-columns="4"] > .wp-block-coblocks-service {
				flex-basis: 50%;
				margin-bottom: 3em;
				max-width: calc(100% / 2 - var(--coblocks-spacing--2, #{map-get($spacing, 2)}));

				&:nth-child(1),
				&:nth-child(3) {
					margin-left: 0;
				}

				&:nth-child(2),
				&:nth-child(4) {
					margin-right: 0;
				}

				&:nth-child(3),
				&:nth-child(4) {
					margin-bottom: 0;
				}
			}
		}

		@include break-wide() {
			&[data-columns="4"] > .wp-block-coblocks-service {
				flex-basis: 25%;
				max-width: calc(100% / 4 - var(--coblocks-spacing--2, #{map-get($spacing, 2)}));
			}
		}
	}
}
