
	.wrap.svelte-1fsogr4 {
		position: relative;
		overflow: hidden;
		/* width: 100%; */
		/* height: 100%; */
		/* aspect-ratio: 1264.7 / 1095.6; */

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	img.svelte-1fsogr4 {
		position: relative;
		top: 0;
		left: 0;
		max-width: 100%;
		height: 100%;
		z-index: 10;
		grid-column: 1;
		grid-row: 1;
		pointer-events: none;
	}

	.palette.svelte-1fsogr4 {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 91%;
		height: 90%;
		display: flex;
		flex-direction: row;
		grid-column: 1;
		grid-row: 1;
		/* justify-content: stretch; */
		/* align-items: stretch; */
		/* overflow: hidden; */
		/* transform: translateY(-100%); */
	}

	.palette.svelte-1fsogr4 {
		gap: 0;
	}

	.palette.row.svelte-1fsogr4 {
		flex-direction: row;
		gap: 0;
	}

	.palette.column.svelte-1fsogr4 {
		flex-direction: column;
		gap: 0;
	}

	.palette.grid.svelte-1fsogr4 {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0;
	}

	.palette.grid.svelte-1fsogr4 > .swatch:where(.svelte-1fsogr4) {
		flex: 1 1 50%;
	}

	.swatch.clickable.svelte-1fsogr4 {
		cursor: pointer;
	}

	.swatch.clickable.svelte-1fsogr4:hover {
		box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.103);
		z-index: 2;
	}

	.swatch.svelte-1fsogr4 {
		position: relative;
		display: inline-block;
		flex: 2;
		transition: border-radius 0.2s ease-in-out;
		background-color: inherit;
	}

	.swatch.round.svelte-1fsogr4 {
		border-radius: 20px;
	}
