:root {
	--left-panel-default-w: 280px;
	--left-panel-max-w: 294px; /* +5% from 280 */
}

.layout {
	--left-panel-w: clamp(var(--left-panel-default-w), 16vw, var(--left-panel-max-w));
}

#left-panel .component-grid .palette {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

#left-panel .component-grid .palette-item {
	min-height: 44px;
}

#left-panel .component-grid .palette-item .icon {
	--icon-base: 18px;
	--icon-growth: calc((var(--left-panel-w, 280px) - var(--left-panel-default-w)) * 0.18);
	width: clamp(var(--icon-base), calc(var(--icon-base) + var(--icon-growth)), 22px);
	height: clamp(var(--icon-base), calc(var(--icon-base) + var(--icon-growth)), 22px);
}