:host {
	display: grid;
	gap: .3em;
	grid-auto-flow: row;
	grid-template-rows: auto auto;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

#swatches {
	display: contents;
}

color-swatch {
	margin: 0;
}

@supports (grid-template-columns: subgrid) {
	/* Avoid uneven swatch heights */
	color-swatch {
		max-width: 100%;
		grid-row: 1 / span 2;
		display: grid;
		grid-template-rows: subgrid;
		/*
		  Container queries don't play well together with subgrid in Chrome 129.
		  See https://issues.chromium.org/issues/369331413
		  This is a workaround to avoid the issue until the new Chrome version is released.
		*/
		contain: inline-size layout;

		&::part(swatch) {
			grid-row: 1;
		}
	}
}