[data-sidebar] {
	display: grid;
	grid-template-columns: var(--grid-template-columns);
	grid-column-gap: var(--sidebar-gap, 4%);
	grid-row-gap: 50px;

	> aside {
		order: var(--sidebar-order);
	}

	> article {
		--has-wide: var(--false);
	}
}

@include media-breakpoint-up (lg) {
	[data-sidebar='right'] {
		--grid-template-columns: minmax(100px, 1fr) var(--sidebar-width, 27%);
	}

	[data-sidebar='left'] {
		--sidebar-order: -1;
		--grid-template-columns: var(--sidebar-width, 27%) minmax(100px, 1fr);
	}
}