@layer components {
	.hexagon-letter {
		--hex-letter-size: 40px;

		position: relative;
		display: grid;
		place-items: center;
		inline-size: var(--hex-letter-size);
		block-size: calc(var(--hex-letter-size) * 1.1);
	}

	.hexagon-letter svg {
		fill: var(--hex-fill, var(--color-text));
		grid-area: 1 / 1;
	}

	.hexagon-letter span {
		grid-area: 1 / 1;
		font-weight: var(--font-weight-bold);
		font-size: var(--font-size-sm);
		color: var(--box-bg, var(--color-bg));
	}

	[data-counter] {
		counter-reset: steps;
	}

	[data-counter] > * {
		counter-increment: steps;
	}
}