<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
    <div class="col-span-3"><slot /></div>
	{
		Astro.locals.starlightRoute.toc && (
			<aside class="right-sidebar-container col-span-1 print:hidden">
				<div class="right-sidebar">
					<slot name="right-sidebar" />
				</div>
			</aside>
		)
	}
</div>

<style>
	@layer starlight.core {
		@media (min-width: 72rem) {
			.right-sidebar-container {
				order: 2;
				position: relative;
				width: calc(
					var(--sl-sidebar-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
				);
			}

			.right-sidebar {
				position: fixed;
				border-inline-start: 1px solid var(--sl-color-hairline);
				width: 100%;
				height: 100vh;
				overflow-y: auto;
				scrollbar-width: none;
			}

			.main-pane {
				width: 100%;
			}

			:global([data-has-sidebar][data-has-toc]) .main-pane {
				--sl-content-margin-inline: auto 0;

				order: 1;
				width: calc(
					var(--sl-content-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
				);
			}
		}
	}
</style>