@import "/styles/layers/components/tags.css" layer(page);
@import "/styles/layers/components/siblings.css" layer(page);

@layer page {
	:root {
		--landmark-header-background-color: var(--color-light-gray-1);
		--landmark-header-foreground-color: var(--color-dark-gray-1);
	}

	.tool-page article > header,
	.tool-page article > section {
		display: grid;
		grid-column: screen-start / screen-end;
		grid-template-columns: subgrid;
	}

	.tool-page article > section {
		padding-block-start: var(--space-xl);
	}

	.tool-page article > section h2 {
		margin-block: var(--space-2xs);
	}

	.tool-page article > header h1 {
		margin-block-end: 0;
	}

	.tool-page main header:not(.home) hgroup {
		margin-block-start: 0;
		margin-block-end: var(--space-2xs);
	}

	.tool-page ul.page-tags {
		padding-block-start: 0;
	}

	.tool-page article > header > * {
		grid-column: col-one / col-thirteen;
	}

	.tool-page article > section > header {
		grid-column: col-one / span 5;
	}

	.tool-page article > section > * {
		grid-column: span 11;
	}

	@media (width < 84rem) {
		.tool-page article > header > *,
		.tool-page article > section > *,
		.tool-page article > section > header {
			grid-column: col-one / span 16;
		}
	}

	.tool-page article > section > aside {
		display: grid;
		grid-template-columns: subgrid;
	}

	img.hero {
		height: auto;
		width: 100%;
	}

	@media (width < 1024px) {

		.tool-page article > section > :not(section, aside),
		.tool-page article > header > * {
			grid-column: col-one / span 16;
		}
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--landmark-header-background-color: var(--color-dark-gray-2);
			--landmark-header-foreground-color: var(--color-light-gray-2);
		}
	}
}