.columns-wrapper {
	$column-count: (2, 3);
	$column-size: (
			5: 5%,
			10: 10%,
			15: 15%,
			20: 20%,
			33: 33.33333%,
			35: 35%,
			40: 40%,
			50: 50%,
			75: 75%,
			90: 90%,
			95: 95%
	);

	display: flex;
	flex-wrap: wrap;
	align-items: start;

	&.columns-nowrap {
		flex-wrap: nowrap;
	}

	// Dynamically generated classes for the columns count:
	//  .columns-2
	//  .columns-3
	@each $count in $column-count {
		&.columns-#{$count} > {
			div,
			li {
				display: block;
				flex: 0 0 (100% / $count);
				max-width: (100% / $count);
			}
		}
	}

	// Dynamically generated classes for the column width:
	//  .column-5
	//  .column-10
	//  .column-15
	//  .column-20
	//  .column-33
	//  .column-35
	//  .column-40
	//  .column-50
	//  .column-75
	//  .column-90
	//  .column-95
	@each $class, $width in $column-size {
		.column-#{$class} {
			flex: 0 0 $width;
			max-width: $width;
		}
	}

	.column-center {
		display: flex;
		justify-content: center;
		text-align: center;
	}

	.column-middle {
		display: flex;
		align-items: center;
	}

	& > {
		div,
		ul {
			&:not(:last-child) {
				section {
					margin-right: 10px;
				}
			}
		}
	}
}
