.wp-block-columns {
	display: flex;

	// Responsiveness: Allow wrapping on mobile.
	flex-wrap: wrap;

	@include break-medium() {
		flex-wrap: nowrap;
	}
}

.wp-block-column {
	flex-grow: 1;
	margin-bottom: 1em;

	// Responsiveness: Show at most one columns on mobile.
	flex-basis: 100%;

	// Prevent the columns from growing wider than their distributed sizes.
	min-width: 0;

	// Prevent long unbroken words from overflowing.
	word-break: break-word; // For back-compat.
	overflow-wrap: break-word; // New standard.

	@include break-small() {

		// Beyond mobile, allow 2 columns.
		flex-basis: calc(50% - #{$grid-size-large});
		flex-grow: 0;

		// Add space between the 2 columns. Themes can customize this if they wish to work differently.
		// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
		&:nth-child(even) {
			margin-left: $grid-size-large * 2;
		}
	}

	@include break-medium() {

		// When columns are in a single row, add space before all except the first.
		&:not(:first-child) {
			margin-left: $grid-size-large * 2;
		}
	}
}