.base-image.svelte-1oizopk {
		display: block;
		width: 100%;
		height: auto;
	}
	.container.svelte-1oizopk {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: var(--size-full);
		height: var(--size-full);
	}
	.image-container.svelte-1oizopk {
		position: relative;
		top: 0;
		left: 0;
		flex-grow: 1;
		width: 100%;
		overflow: hidden;
	}
	.fit-height.svelte-1oizopk {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.mask.svelte-1oizopk {
		opacity: 0.85;
		transition: all 0.2s ease-in-out;
		position: absolute;
	}
	.image-container.svelte-1oizopk:hover .mask:where(.svelte-1oizopk) {
		opacity: 0.3;
	}
	.mask.active.svelte-1oizopk {
		opacity: 1;
	}
	.mask.inactive.svelte-1oizopk {
		opacity: 0;
	}
	.legend.svelte-1oizopk {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		gap: var(--spacing-sm);
		padding: var(--spacing-sm);
	}
	.legend-item.svelte-1oizopk {
		display: flex;
		flex-direction: row;
		align-items: center;
		cursor: pointer;
		border-radius: var(--radius-sm);
		padding: var(--spacing-sm);
	}