// stylelint-disable max-nesting-depth

.layout {
	$this: &;

	&__wrap {
		display: grid;
		column-gap: var(--global-gutters-default, 2rem);
		row-gap: 2rem;

		@include media(tablet up) {
			row-gap: var(--global-gutters-default, 2rem);
		}
	}

	&[data-layout-type='layout-grid-2'] {
		#{$this}__wrap {
			@include media(tablet up) {
				row-gap: 10rem;
				grid-template-columns: repeat(12, minmax(0, 1fr));
			}

			> * {
				@include media(tablet up) {
					grid-column-end: span 6;
				}
			}
		}
	}

	&[data-layout-type='layout-grid-3'] {
		#{$this}__wrap {
			@include media(tablet up) {
				grid-template-columns: repeat(12, minmax(0, 1fr));
			}

			> * {
				@include media(tablet) {
					grid-column-end: span 6;
				}

				@include media(desktop up) {
					grid-column-end: span 4;
				}
			}
		}
	}

	&[data-layout-type='layout-grid-4'] {
		#{$this}__wrap {
			@include media(tablet up) {
				grid-template-columns: repeat(12, minmax(0, 1fr));
			}

			> * {
				@include media(tablet) {
					grid-column-end: span 6;
				}

				@include media(desktop up) {
					grid-column-end: span 3;
				}
			}
		}
	}
}

// stylelint-enable max-nesting-depth