.container {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
}

.controls {
	max-inline-size: 20rem;
	min-inline-size: 0;
}

.preview {
	flex: 1 1 20rem;
	min-inline-size: 0;
}

canvas {
	inline-size: 100%;
}

.toggle {
	display: block;
	margin-block: 0.5rem;
}

.control-group > input,
.control-group > select {
	inline-size: 100%;
}

.row {
	display: flex;
	align-items: center;
	gap: 1ch;
	margin-block: 1rem;

	span,
	label {
		font-size: 0.9rem;
	}

	input {
		flex: 1;
	}
}

#ramp-preview {
	block-size: 2rem;
	border: 1px solid var(--grey);
	margin-block: 0.5rem;
}

.colour-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-end: 0.5rem;

	input[type="range"],
	input[type="number"] {
		flex: 1;
		min-inline-size: 0;
	}
}

#download-btn {
	margin-block-start: 1rem;
}