
	.card.svelte-kbpwyl {
		--desktop-padding: 1em;
		--mobile-padding: 0.8em;

		position: relative;
		border-radius: var(--surface-border-radius);
		display: flex;
		flex-direction: column;
		gap: var(--gap-medium-related-blocks);
		overflow: hidden;
		width: min(min-content, 100vw);
		padding: var(--desktop-padding);
		color: var(--on-surface);
	}

	.card.svelte-kbpwyl::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--surface-color);
		z-index: -1;
		border-radius: inherit;
		transition: background-color 0.8s cubic-bezier(0.17, 0.67, 0.1, 0.98);
	}

	/* (empty) .card > :global(a) {
		/* color: var(--on-surface); *\/
	}*/

	.justifyContentCenter.svelte-kbpwyl {
		display: flex;
		justify-content: center;
	}

	.alignCenter.svelte-kbpwyl {
		display: flex;
		align-items: center;
	}

	.textAlignCenter.svelte-kbpwyl {
		text-align: center;
	}

	@media only screen and (max-width: 800px) {
		.card.svelte-kbpwyl {
			padding: var(--mobile-padding);
		}
	}

	.card.svelte-kbpwyl > * {
		max-width: 100%;
	}

	.card.black.svelte-kbpwyl:before {
		background-color: black;
	}

	.card.reactive.svelte-kbpwyl:hover::before {
		background-color: var(--surface-color-primary);
		transition-duration: 0.25s;
	}

	.card.outlined.svelte-kbpwyl::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
		/* z-index: 1; */

		border-radius: inherit;
		box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 0.333);
		pointer-events: none;
	}
	.card.dim.svelte-kbpwyl {
		opacity: 1;
	}

	.dim.svelte-kbpwyl:before {
		background-color: rgba(255, 255, 255, 0.01);
	}

	.primary.svelte-kbpwyl:before {
		background-color: var(--surface-color-primary);
		backdrop-filter: blur(0.5em);
		-moz-backdrop-filter: blur(0.5em);
		-webkit-backdrop-filter: blur(0.5em);
		box-shadow: 0 2em 3em rgba(0, 0, 0, 0.1);
	}

	.sharp.svelte-kbpwyl {
		border-radius: 0;
	}
	.card.sharp.svelte-kbpwyl::after {
		border-radius: 0;
	}

	.transparent.svelte-kbpwyl:before {
		background-color: transparent;
	}

	.grow.svelte-kbpwyl {
		align-self: stretch;
		justify-self: stretch;
		flex-grow: 3;
		width: auto;
		height: 100%;
	}

	.growWidth.svelte-kbpwyl {
		width: auto;
		align-self: stretch;
		justify-self: stretch;
	}

	.growHeight.svelte-kbpwyl {
		height: 100%;
	}

	a.svelte-kbpwyl {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
	}

	video.svelte-kbpwyl {
		position: absolute;
		left: 0;
		top: 0;
		width: auto;
		min-width: 100%;
		height: 100%;
		min-height: 100%;
		z-index: 0;
		object-fit: cover;
	}

	.bgimg.svelte-kbpwyl,
	.bgvid.svelte-kbpwyl {
		all: unset;
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 1;
	}
