
.wp-block-columns {
	
	justify-content: space-between;

	/* Horizontal Alignment */

	&.horizontal-alignment--left { justify-content: flex-start; }
	&.horizontal-alignment--center { justify-content: center; }
	&.horizontal-alignment--right { justify-content: flex-end; }

	/* Column Gaps */

	--gap: var(--col-gap);

	&.gap-spacing--none { --gap: 0px; gap: var(--gap); }
	&.gap-spacing--huge { 
		--gap: var(--col-gap); 
		gap: var(--gap);
		@media(min-width: 782px) {
			--gap: var(--col-gap-huge);
		}
	}
	&.gap-spacing--large { 
		--gap: var(--col-gap); 
		gap: var(--gap);
		@media(min-width: 782px) {
			--gap: var(--col-gap-large);
		}
	}
	&.gap-spacing--small { 
		--gap: var(--col-gap); 
		gap: var(--gap);
		@media(min-width: 782px) {
			--gap: var(--col-gap-small);
		}
	}
	&.gap-spacing--negative { --gap: calc(var(--bl) * 6 * -1); gap: 0; }

	&.desktop-columns--2, &.desktop-columns--3, &.desktop-columns--4, &.desktop-columns--5, &.desktop-columns--6, &.desktop-columns--7, &.desktop-columns--8,
	&.columns-1, &.columns-2, &.columns-3, &.columns-4, &.columns-5, &.columns-6, &.columns-7, &.columns-8 {
		display: flex!important;
		flex-wrap: wrap!important;
		> .wp-block-column {
			flex-shrink: 0!important;
			flex-grow: 0!important;
			width: auto!important;
		}
	}

	--width-1-size: 100%;
	--width-2-size: calc(50% - var(--gap) * .5);
	--width-3-size: calc(33.33% - var(--gap) * .67);
	--width-4-size: calc(25% - var(--gap) * .75);
	--width-5-size: calc(20% - var(--gap) * .8);
	--width-6-size: calc(16.66% - var(--gap) * .833);
	--width-7-size: calc(14.28% - var(--gap) * .857);
	--width-8-size: calc(12.5% - var(--gap) * .875);

	--width-90-size: calc(90% - var(--gap) * .1);
	--width-85-size: calc(85% - var(--gap) * .15);
	--width-80-size: calc(80% - var(--gap) * .2);
	--width-75-size: calc(75% - var(--gap) * .25);
	--width-70-size: calc(70% - var(--gap) * .3);
	--width-66-size: calc(66.66% - var(--gap) * .33);
	--width-65-size: calc(65% - var(--gap) * .35);
	--width-60-size: calc(60% - var(--gap) * .40);
	--width-55-size: calc(55% - var(--gap) * .45);
	--width-45-size: calc(45% - var(--gap) * .55);
	--width-40-size: calc(40% - var(--gap) * .60);
	--width-35-size: calc(35% - var(--gap) * .65);
	--width-30-size: calc(30% - var(--gap) * .7);
	--width-15-size: calc(15% - var(--gap) * .85);
	--width-10-size: calc(10% - var(--gap) * .9);

	@media (min-width: 1200px) {
		&.desktop-columns--2 > .wp-block-column, &.columns-2 > .wp-block-column { flex-basis: var(--width-2-size)!important; }
		&.desktop-columns--3 > .wp-block-column, &.columns-3 > .wp-block-column { flex-basis: var(--width-3-size)!important; }
		&.desktop-columns--4 > .wp-block-column, &.columns-4 > .wp-block-column { flex-basis: var(--width-4-size)!important; }
		&.desktop-columns--5 > .wp-block-column, &.columns-5 > .wp-block-column { flex-basis: var(--width-5-size)!important; }
		&.desktop-columns--6 > .wp-block-column, &.columns-6 > .wp-block-column { flex-basis: var(--width-6-size)!important; }
		&.desktop-columns--7 > .wp-block-column, &.columns-7 > .wp-block-column { flex-basis: var(--width-7-size)!important; }
		&.desktop-columns--8 > .wp-block-column, &.columns-8 > .wp-block-column { flex-basis: var(--width-8-size)!important; }

		> .wp-block-column[style*="flex-basis:90%"] { flex-basis: var(--width-90-size)!important; }
		> .wp-block-column[style*="flex-basis:85%"] { flex-basis: var(--width-85-size)!important; }
		> .wp-block-column[style*="flex-basis:80%"] { flex-basis: var(--width-80-size)!important; }
		> .wp-block-column[style*="flex-basis:75%"] { flex-basis: var(--width-75-size)!important; }
		> .wp-block-column[style*="flex-basis:70%"] { flex-basis: var(--width-70-size)!important; }
		> .wp-block-column[style*="flex-basis:66.66%"] { flex-basis: var(--width-66-size)!important; }
		> .wp-block-column[style*="flex-basis:65%"] { flex-basis: var(--width-65-size)!important; }
		> .wp-block-column[style*="flex-basis:60%"] { flex-basis: var(--width-60-size)!important; }
		> .wp-block-column[style*="flex-basis:55%"] { flex-basis: var(--width-55-size)!important; }
		> .wp-block-column[style*="flex-basis:50%"] { flex-basis: var(--width-2-size)!important; }
		> .wp-block-column[style*="flex-basis:45%"] { flex-basis: var(--width-45-size)!important; }
		> .wp-block-column[style*="flex-basis:40%"] { flex-basis: var(--width-40-size)!important; }
		> .wp-block-column[style*="flex-basis:35%"] { flex-basis: var(--width-35-size)!important; }
		> .wp-block-column[style*="flex-basis:33.33%"] { flex-basis: var(--width-3-size)!important; }
		> .wp-block-column[style*="flex-basis:30%"] { flex-basis: var(--width-30-size)!important; }
		> .wp-block-column[style*="flex-basis:25%"] { flex-basis: var(--width-4-size)!important; }
		> .wp-block-column[style*="flex-basis:20%"] { flex-basis: var(--width-5-size)!important; }
		> .wp-block-column[style*="flex-basis:15%"] { flex-basis: var(--width-15-size)!important; }
		> .wp-block-column[style*="flex-basis:10%"] { flex-basis: var(--width-10-size)!important; }
		
		&.gap-spacing--negative > .wp-block-column {
			&.has-background {
				z-index: 2;
			}

			&:last-child { 
				margin-left: calc(var(--bl) * 6 * -1); 
			}
		}
	}

	@media (min-width: 782px) and (max-width: 1199px) {
		&.tablet-columns--1 > .wp-block-column, &.columns-1 > .wp-block-column { flex-basis: var(--width-1-size)!important; flex: auto; }
		&.tablet-columns--2 > .wp-block-column, &.columns-2 > .wp-block-column { flex-basis: var(--width-2-size)!important; }
		&.tablet-columns--3 > .wp-block-column, &.columns-3 > .wp-block-column { flex-basis: var(--width-3-size)!important; }
		&.tablet-columns--4 > .wp-block-column, &.columns-4 > .wp-block-column { flex-basis: var(--width-4-size)!important; }
		&.tablet-columns--5 > .wp-block-column, &.columns-5 > .wp-block-column { flex-basis: var(--width-5-size)!important; }
		&.tablet-columns--6 > .wp-block-column, &.columns-6 > .wp-block-column { flex-basis: var(--width-6-size)!important; }
		&.tablet-columns--1, &.tablet-columns--2, &.tablet-columns--3, &.tablet-columns--4, &.tablet-columns--5, &.tablet-columns--6 {
			display: flex!important;
			flex-wrap: wrap!important;
			> .wp-block-column {
				flex-shrink: 0!important;
				flex-grow: 0!important;
				width: auto!important;
			}
		}

		> .wp-block-column[style*="flex-basis:90%"] { flex-basis: var(--width-90-size)!important; }
		> .wp-block-column[style*="flex-basis:85%"] { flex-basis: var(--width-85-size)!important; }
		> .wp-block-column[style*="flex-basis:80%"] { flex-basis: var(--width-80-size)!important; }
		> .wp-block-column[style*="flex-basis:75%"] { flex-basis: var(--width-75-size)!important; }
		> .wp-block-column[style*="flex-basis:70%"] { flex-basis: var(--width-70-size)!important; }
		> .wp-block-column[style*="flex-basis:66.66%"] { flex-basis: var(--width-66-size)!important; }
		> .wp-block-column[style*="flex-basis:65%"] { flex-basis: var(--width-65-size)!important; }
		> .wp-block-column[style*="flex-basis:60%"] { flex-basis: var(--width-60-size)!important; }
		> .wp-block-column[style*="flex-basis:55%"] { flex-basis: var(--width-55-size)!important; }
		> .wp-block-column[style*="flex-basis:50%"] { flex-basis: var(--width-2-size)!important; }
		> .wp-block-column[style*="flex-basis:45%"] { flex-basis: var(--width-45-size)!important; }
		> .wp-block-column[style*="flex-basis:40%"] { flex-basis: var(--width-40-size)!important; }
		> .wp-block-column[style*="flex-basis:35%"] { flex-basis: var(--width-35-size)!important; }
		> .wp-block-column[style*="flex-basis:33.33%"] { flex-basis: var(--width-3-size)!important; }
		> .wp-block-column[style*="flex-basis:30%"] { flex-basis: var(--width-30-size)!important; }
		> .wp-block-column[style*="flex-basis:25%"] { flex-basis: var(--width-4-size)!important; }
		> .wp-block-column[style*="flex-basis:20%"] { flex-basis: var(--width-5-size)!important; }
		> .wp-block-column[style*="flex-basis:15%"] { flex-basis: var(--width-15-size)!important; }
		> .wp-block-column[style*="flex-basis:10%"] { flex-basis: var(--width-10-size)!important; }

		&.gap-spacing--negative > .wp-block-column {
			&.has-background {
				z-index: 2;
			}

			&:last-child { 
				margin-left: calc(var(--bl) * 6 * -1); 
			}
		}
	}

	@media (max-width: 781px) {
		&.mobile-columns--2 > .wp-block-column, &.columns-2 > .wp-block-column { flex-basis: var(--width-2-size)!important; }
		&.mobile-columns--3 > .wp-block-column { flex-basis: var(--width-3-size)!important; }
		&.mobile-columns--2, &.mobile-columns--3 {
			display: flex!important;
			flex-wrap: wrap!important;
			> .wp-block-column {
				flex-shrink: 0!important;
				flex-grow: 0!important;
				width: auto!important;
			}
		}
		&.gap-spacing--negative > .wp-block-column.has-background { 
			margin-top: calc(var(--bl) * 2 * -1); 
			margin-left: calc(var(--bl)*1.5);
			margin-right: calc(var(--bl)*1.5);
			z-index: 2;
			order: 2;
		}
	}

	/* Vertical Offset */

	@media (min-width: 1200px) {
		&.vertical-offset {
			padding-top: 64px;
			.wp-block-column:nth-of-type(3n + 2) {
				margin-top: -64px;
				margin-bottom: 64px;
			}
		}
	}

	/* Mobile Order */

	&.mobile-order--reversed {
		@media (max-width: 781px) {
			flex-direction: column-reverse;
		}	
	}

	/* Seperating Borders */

	&.seperating-borders--dark, &.seperating-borders--light, &.seperating-borders--grey, &.seperating-borders--colour {
		justify-content: center;
		> .wp-block-column {
			border-width: 0;
			&:not(:first-of-type) {
				border-left-width: 1px;
				border-style: solid;
			}
		}
	}

	&.seperating-borders--dark > .wp-block-column { border-color: var(--wp--preset--color--contrast) }
	&.seperating-borders--light > .wp-block-column { border-color: var(--wp--preset--color--base) }
	&.seperating-borders--grey > .wp-block-column { border-color: var(--wp--preset--color--mid-grey) }
	&.seperating-borders--colour > .wp-block-column { border-color: var(--wp--preset--color--accent) }

	@media (min-width: 1200px) {
		&.seperating-borders--dark, &.seperating-borders--light, &.seperating-borders--grey, &.seperating-borders--colour {
			&.desktop-columns--2, &.desktop-columns--3, &.desktop-columns--4, &.desktop-columns--5, &.desktop-columns--6, &.desktop-columns--7, &.desktop-columns--8 {
				> .wp-block-column { border-top-width: 1px; }
			}

			&.desktop-columns--2 > .wp-block-column:nth-of-type(-n+2),
			&.desktop-columns--3 > .wp-block-column:nth-of-type(-n+3), 
			&.desktop-columns--4 > .wp-block-column:nth-of-type(-n+4), 
			&.desktop-columns--5 > .wp-block-column:nth-of-type(-n+5), 
			&.desktop-columns--6 > .wp-block-column:nth-of-type(-n+6), 
			&.desktop-columns--7 > .wp-block-column:nth-of-type(-n+7), 
			&.desktop-columns--8 > .wp-block-column:nth-of-type(-n+8) { 
				border-top-width: 0; 
			}
			
			&.desktop-columns--2 > .wp-block-column:nth-of-type(odd),
			&.desktop-columns--3 > .wp-block-column:nth-of-type(3n + 1),
			&.desktop-columns--4 > .wp-block-column:nth-of-type(4n + 1),
			&.desktop-columns--5 > .wp-block-column:nth-of-type(5n + 1),
			&.desktop-columns--6 > .wp-block-column:nth-of-type(6n + 1),
			&.desktop-columns--7 > .wp-block-column:nth-of-type(7n + 1),
			&.desktop-columns--8 > .wp-block-column:nth-of-type(8n + 1) { 
				border-left:none; 
			}
		}
	}

	@media (min-width: 782px) and (max-width: 1199px) {
		&.seperating-borders--dark, &.seperating-borders--light, &.seperating-borders--grey, &.seperating-borders--colour {
			&.tablet-columns--1, &.tablet-columns--2, &.tablet-columns--3, &.tablet-columns--4, &.tablet-columns--5, &.tablet-columns--6 {
				> .wp-block-column { border-top-width: 1px; }
			}

			&.tablet-columns--1 > .wp-block-column:nth-of-type(1), 
			&.tablet-columns--2 > .wp-block-column:nth-of-type(-n+2),
			&.tablet-columns--3 > .wp-block-column:nth-of-type(-n+3), 
			&.tablet-columns--4 > .wp-block-column:nth-of-type(-n+4), 
			&.tablet-columns--5 > .wp-block-column:nth-of-type(-n+5), 
			&.tablet-columns--6 > .wp-block-column:nth-of-type(-n+6) { 
				border-top-width: 0; 
			}

			&.tablet-columns--1 > .wp-block-column,
			&.tablet-columns--2 > .wp-block-column:nth-of-type(odd),
			&.tablet-columns--3 > .wp-block-column:nth-of-type(3n + 1),
			&.tablet-columns--4 > .wp-block-column:nth-of-type(4n + 1),
			&.tablet-columns--5 > .wp-block-column:nth-of-type(5n + 1),
			&.tablet-columns--6 > .wp-block-column:nth-of-type(6n + 1) {
				border-left-width: 0;
			}
		}
	}

	@media (max-width: 781px) {
		&.seperating-borders--dark, &.seperating-borders--light, &.seperating-borders--grey, &.seperating-borders--colour {
			> .wp-block-column:not(:first-of-type) { border-top-width: 1px; border-left-width: 0; }

			&.mobile-columns--2 > .wp-block-column:nth-of-type(-n+2),
			&.mobile-columns--3 > .wp-block-column:nth-of-type(-n+3) { 
				border-top-width: 0;
			}

			&.mobile-columns--2 > .wp-block-column:nth-of-type(even),
			&.mobile-columns--3 > .wp-block-column:nth-of-type(3n+2), &.mobile-columns--3 > .wp-block-column:nth-of-type(3n + 3) { 
				border-left-width: 1px; 
			}
		}
	}

}

/* Column Link */

a.wp-block-column {
	text-decoration: none;
}

.wp-block-column {

	@media (min-width: 782px) and (max-width: 1199px) {
	    &.hide-tablet--true {
	        display: none !important;
	    }
	}

	/* Content Alignment */

	&.content-alignment--middle {
		display: flex;
		align-items: center;
	}

	&.content-alignment--bottom {
		display: flex;
		align-items: flex-end;
	}

	/* Sticky Position */

	&.sticky-position--true {
		@media(min-width: 782px) {
			position: sticky;
			top: 136px;
		}
	}

	/* Wrap Content */

	@media(min-width: 782px) {
		&.wrap-content--left > * { 
			margin-right: max(24px, calc((100vw - var(--wrap-width--standard)) / 2));
		}

		&.wrap-content--right > * { 
			margin-left: max(24px, calc((100vw - var(--wrap-width--standard)) / 2));
		}
	}
}