@layer components {
	.stat-block {
		display: flex;
		flex-direction: column;
		gap: calc(var(--gutter) / 4);
	}

	@scope (.stat-block) {
		& > p:first-child {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xxl);
			font-weight: 700;
			letter-spacing: -0.03em;
			color: var(--color-text-invert);
		}

		& > p:last-child {
			font-size: var(--font-size-xs);
			font-weight: 500;
			color: var(--color-text-muted-invert);
		}
	}
}