.columns {
	position: relative;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	--columns: 1;
}

.columns > .image {
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.columns > .image * {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.columns > .row {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
	box-sizing: border-box;
	width: calc(100% + var(--columns-gutter-x, 1rem));
	margin-top: calc(var(--columns-gutter-y, 1rem) * -1);
	margin-right: calc(var(--columns-gutter-x, 1rem) * -.5);
	margin-left: calc(var(--columns-gutter-x, 1rem) * -.5);
}

.columns > .row > .column {
	position: relative;
	display: block;
	box-sizing: border-box;
	--column-fraction: calc(1 / var(--columns));
	width: calc(var(--column-fraction) * 100%);
	max-width: 100%;
	flex: 0 0 auto;
	margin-top: var(--columns-gutter-y, 1rem);
	padding-right: calc(var(--columns-gutter-x, 1rem) * .5);
	padding-left: calc(var(--columns-gutter-x, 1rem) * .5);
}

/*  background colors  */
.columns-bgcolor-white { background: #FFFFFF; }
.columns-bgcolor-lightgrey { background: #F0F0F0; }
.columns-bgcolor-grey { background: #AAAAAA; }
.columns-bgcolor-darkgrey { background: #666666; color: #FFFFFF; }
.columns-bgcolor-black { background: #000000; color: #FFFFFF; }

/*  columns  */
.columns-columns-two, .columns-columns-twoone, .columns-columns-onetwo { --columns: 2; }
.columns-columns-twoone > .row > .column-0 { --column-fraction: calc(2 / 3); }
.columns-columns-twoone > .row > .column-1 { --column-fraction: calc(1 / 3); }
.columns-columns-onetwo > .row > .column-0 { --column-fraction: calc(1 / 3); }
.columns-columns-onetwo > .row > .column-1 { --column-fraction: calc(2 / 3); }
.columns-columns-three, .columns-columns-threeone, .columns-columns-onethree, .columns-columns-oneonetwo, .columns-columns-onetwoone, .columns-columns-twooneone { --columns: 3; }
.columns-columns-threeone > .row > .column-0 { --column-fraction: calc(3 / 4); }
.columns-columns-threeone > .row > .column-1 { --column-fraction: calc(1 / 4); }
.columns-columns-onethree > .row > .column-0 { --column-fraction: calc(1 / 4); }
.columns-columns-onethree > .row > .column-1 { --column-fraction: calc(3 / 4); }
.columns-columns-oneonetwo > .row > .column { --column-fraction: calc(1 / 4); }
.columns-columns-oneonetwo > .row > .column-2 { --column-fraction: calc(2 / 4); }
.columns-columns-onetwoone > .row > .column { --column-fraction: calc(1 / 4); }
.columns-columns-onetwoone > .row > .column-1 { --column-fraction: calc(2 / 4); }
.columns-columns-twooneone > .row > .column { --column-fraction: calc(1 / 4); }
.columns-columns-twooneone > .row > .column-0 { --column-fraction: calc(2 / 4); }
.columns-columns-four { --columns: 4; }
.columns-columns-five { --columns: 5; }
.columns-columns-six { --columns: 6; }

/*  gap  */
.columns-gap-small {
	--columns-gutter-x: calc(var(--columns-gutter-x, 1rem) / 2);
	--columns-gutter-y: calc(var(--columns-gutter-y, 1rem) / 2);
}
.columns-gap-none {
	--columns-gutter-x: 0rem;
	--columns-gutter-y: 0rem;
}

.pageroot .columns > .row { width: calc(100% + var(--columns-gutter-x, 1rem)); }