dialog.svelte-1xl78ap {
		position: fixed;
		z-index: 100;
		padding-top: 10rem;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		overflow: auto;
		border-width: 0;
		background-color: hsl(from black h s l / 90%);
		outline: none;

		img:where(.svelte-1xl78ap) {
			margin: auto;
			display: block;
			object-fit: scale-down;
			width: 80%; 
			max-width: 1280;
			max-height: 90%;
			border-radius: 2rem;
			border: 1px solid var(--vats-text-inverse);
		}

		.previewcaption:where(.svelte-1xl78ap) {
			margin: auto;
			display: block;
			width: 80%;
			max-width: 700px;
			text-align: center;
			color: var(--vats-text-inverse);
			/* font-weight: 600; */
			font-size: var(--vats-text-l);
		}

		.close:where(.svelte-1xl78ap) {
			position: absolute;
			top: 1rem;
			left: 3rem;
			color: var(--vats-text-inverse);
			font-size: 5rem;
			font-weight: 600;
			transition: 0.3s;
		}

		.close:where(.svelte-1xl78ap):hover {
			cursor: pointer;
		}

		img:where(.svelte-1xl78ap),
		.previewcaption:where(.svelte-1xl78ap) {
			animation-name: svelte-1xl78ap-zoom;
			animation-duration: 0.6s;
		}
	}

	@keyframes svelte-1xl78ap-zoom {
		from {
			transform: scale(0);
		}
		to {
			transform: scale(1);
		}
	}