.wp-block-toolbelt-layout-grid {

	display: grid;
	grid-template-columns: 100%;
	grid-auto-flow: dense;
	row-gap: var( --toolbelt-spacing );
	margin: 0 calc( var( --toolbelt-spacing ) * -1 );

	.wp-block-toolbelt-column {

		margin: 0 var( --toolbelt-spacing );
		max-width: none;

		&.is-style-border-top {

			border-top: var( --toolbelt-border-width ) solid currentColor;
			padding-top: var( --toolbelt-spacing );

		}

		> :first-child {

			margin-top: 0;

		}

	}

	&.is-style-padded {

		padding: var( --toolbelt-spacing );

	}

}

@mixin toolbelt-grid-columns( $columns, $layout, $design, $first_position: false ) {

	.toolbelt-grid-layout-#{$columns}-#{$layout} {

		grid-template-columns: $design;

	}

	@if $first_position != false {

		.toolbelt-grid-layout-#{$columns}-#{$layout} > :nth-child( 1 ) {

			grid-column: $first_position;

		}

	}

}

@media only screen and ( min-width: 600px ) {

	[class*=toolbelt-grid-layout] {

		grid-template-columns: 1fr 1fr;

	}

}

@media only screen and ( min-width: 600px ) and ( max-width: 899px ) {

	[class*=toolbelt-grid-layout-3],
	[class*=toolbelt-grid-layout-5] {

		> :nth-child(1) {

			grid-column: 1 / -1;

		}

	}

}


@media screen and ( min-width: 900px ) {

	@include toolbelt-grid-columns( 2, 0, 50% 50% ); // 6/12 6/12
	@include toolbelt-grid-columns( 2, 1, 75% 25% ); // 9/12 3/12
	@include toolbelt-grid-columns( 2, 2, 25% 75%, 2 ); // 3/12 9/12

	@include toolbelt-grid-columns( 3, 0, 33.33% 33.33% 33.33% ); // 4/12 4/12 4/12
	@include toolbelt-grid-columns( 3, 1, 25% 50% 25%, 2 ); // 3/12 6/12 3/12
	@include toolbelt-grid-columns( 3, 2, 50% 25% 25% ); // 6/12 3/12 3/12
	@include toolbelt-grid-columns( 3, 3, 25% 25% 50%, 3 ); // 3/12 3/12 6/12
	@include toolbelt-grid-columns( 3, 4, 16.66% 50% 33.33%, 2 ); // 2/12 6/12 4/12
	@include toolbelt-grid-columns( 3, 5, 50% 16.66% 33.33% ); // 6/12 2/12 4/12

	@include toolbelt-grid-columns( 4, 0, 25% 25% 25% 25% ); // 3/12 3/12 3/12 3/12
	@include toolbelt-grid-columns( 4, 1, 50% 16.66% 16.66% 16.66% ); // 6/12 2/12 2/12 2/12
	@include toolbelt-grid-columns( 4, 2, 16.66% 16.66% 16.66% 50%, 4 ); // 2/12 2/12 2/12 6/12
	@include toolbelt-grid-columns( 4, 3, 33.33% 16.66% 16.66% 33.33% ); // 4/12 2/12 2/12 4/12
	@include toolbelt-grid-columns( 4, 4, 16.66% 33.33% 33.33% 16.66%, 2 ); // 2/12 4/12 4/12 2/12

}