@layer hongli.layout {
	.hg-container {
		width: min(calc(100% - (2 * var(--hg-page-gutter))), var(--hg-content-max));
		margin-inline: auto;
	}

	.hg-section {
		padding-block: var(--hg-space-10);
	}

	.hg-section--soft {
		background: var(--hg-surface-soft);
	}

	.hg-section__header {
		display: grid;
		gap: var(--hg-space-2);
		margin-bottom: var(--hg-space-5);
	}

	.hg-section__header--split {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}

	.hg-grid {
		display: grid;
		gap: var(--hg-space-3);
	}

	.hg-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hg-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hg-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.hg-stack {
		display: grid;
		gap: var(--hg-space-3);
	}

	.hg-cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--hg-space-2);
	}

	@media (max-width: 74.999rem) {
		.hg-grid--4 {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 47.999rem) {
		.hg-section {
			padding-block: var(--hg-space-8);
		}

		.hg-section__header--split,
		.hg-grid--2,
		.hg-grid--3,
		.hg-grid--4 {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}