@layer components {
	.headline {
		display: flex;
		flex-direction: column;
		gap: var(--headline-spacing, calc(var(--gutter) * 0.75));
	}

	.headline > h2 {
		font-size: var(--font-size-xxl);
	}

	.headline > p {
		max-inline-size: var(--line-length-lg);
	}

	.headline[data-align="center"] {
		text-align: center;
		align-items: center;
	}
}