@layer pageHistory {
	.body--is-page-history {
		display:grid;
		grid-template-areas:
		"logo"
		"posts"
		"pagination"
		"aside"
		"instance"
		"footer"
		;
	}

	.logo {
		grid-area: logo;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
	}

	.instance {
		grid-area: instance;
		background: var(--color-background-aside-focus);
		padding: 1rem;
		display: flex;
		justify-content: center;
	}

	.posts-wrapper {
		grid-area: posts;
		padding: 4rem 1rem 2rem;
	}

	footer {
		grid-area: footer;
	}

	aside {
		grid-area: aside;
		background: var(--color-background-aside);
		& p {
			font-size: small;
			padding: 0 1rem;
		}
	}

	.pagination {
		grid-area: pagination;
		background: var(--color-background-aside);
		padding: 1rem;
		display: flex;
		justify-content: center;
		gap: 1rem;
	}

	.summaries {
		& ul {
			list-style: none;
			padding: 0;
		}
	}

	.history-item {
		padding: 1rem;
		background: var(--color-background-aside);
		border-radius: 4px;

		& .history-item__text {
			white-space: pre-wrap;
		}
	}

	@media (min-width:700px) {
		.body--is-page-history {
			display:grid;
			grid-template-areas:
			"logo logo"
			"posts ."
			"posts pagination"
			"posts aside"
			"posts instance"
			"posts ."
			"footer footer"
			;
			grid-template-rows: auto 125px min-content min-content min-content auto auto;
			grid-template-columns: 2fr 1fr;
		}

		.pagination {
			position: sticky;
			top: 0;
		}
	}

	@media (min-width: 1200px) {
		.body--is-page-history {
			display:grid;
			grid-template-areas:
			"logo . ."
			". posts ."
			". posts pagination"
			". posts aside"
			". posts instance"
			". posts ."
			"footer footer footer"
			;
			grid-template-rows: auto 125px min-content min-content min-content auto auto;
			grid-template-columns: 1fr 2fr 1fr;
		}

		.pagination {
			align-self: start;
		}
	}
}