Layout Block

.LayoutBlock {
	&__columns {
		@apply grid 
			grid-cols-12
			gap-y-4
			sm:gap-6
			items-start;

		&.columns--2 {
			@apply xs:gap-y-10
				lg:gap-12
				2xl:gap-20;
		}

		&.columns--centered {
			@apply sm:items-center;
		}

		&:not(.columns--1, .columns--2) {
			.LayoutBlock__column {
				h2, 
				h3,
				h4,
				h5,
				h6,
				p {
					@apply last:mb-0
						first:last:mb-0;
				}
		
				h2 {
					@apply first:mb-3
						first:md:mb-4
						first:2xl:mb-7
						text-2xl
						2xl:text-3xl;
				}
			
				h3 {
					@apply text-lg
						2xl:text-xl;
				}
			
				h4 {
					@apply text-base
						2xl:text-lg;
				}
			
				h5 {
					@apply text-sm
						2xl:text-base;
				}
			
				h6 {
					@apply text-sm
						2xl:text-base;
				}
		
				p, 
				a:not(.Button),
				li, 
				figcaption {
					@apply md:text-base 
						2xl:text-lg
						3xl:leading-snug;
				}
			}
		}

		.Layout--full & {
			&.columns--3 {
				@apply lg:gap-10
					2xl:gap-16;
			}
		}
	}

	&__column {
		@apply col-span-12
			sm:max-lg:col-span-6;
	}
}

.Layout--sidebar {
	.LayoutBlock {
		.LayoutBlock__columns:not(.columns--2) {
			.LayoutBlock__column:not(.column-span-12) {
				@apply md:max-lg:col-span-4
					lg:max-2xl:col-span-6 #{!important};
			}
		}

		.LayoutBlock__columns:not(.columns--1) {
			p {
				@apply not-last:mb-6;
			}

			figure {
				@apply my-6
					first:mt-0
					last:mb-0;
			}
		}
	}
}