@layer cavalree.system {
	.c-composition {
		--c-composition--gap: 0rem;
		--c-composition--gap--block: var(--c-composition--gap);
		--c-composition--gap--inline: var(--c-composition--gap);
		--c-composition--place: normal;
		--c-composition--place--block: var(--c-composition--place);
		--c-composition--place--inline: var(--c-composition--place);
		--c-composition--size: none;
		--c-composition--space: 0rem;

		align-items: var(--c-composition--place--block);
		column-gap: var(--c-composition--gap--inline);
		display: block grid;
		justify-items: var(--c-composition--place--inline);
		row-gap: var(--c-composition--gap--block);
	}

	.c-composition_item {
		--_c-composition_item--fill: 100%;
		--_c-composition_item--size: var(--c-composition--size);
		--_c-composition_item--space: max(var(--c-composition_item--space), var(--c-composition_item--clearance));

		--c-composition_item--clearance: calc(1px * -infinity);
		--c-composition_item--space: var(--c-composition--space);

		& + & {
			margin-block-start: var(--_c-composition_item--space);
		}

		inline-size: var(--_c-composition_item--fill);
		max-inline-size: var(--_c-composition_item--size);
	}
}