.grid.svelte-1x244kc {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		width: calc(100% - 10px);
		align-items: center;
		justify-content: center;
		justify-items: center;

		min-height: 400px;
		gap: var(--gap-spacious-grid);

		width: calc(100% - 50px);
		grid-template-columns: 0.75fr 1.25fr;

		grid-column: 1 / -1;
		min-height: 80svh;
		max-width: 1200px;
		align-self: center;
		justify-self: center;
		align-items: center;
		justify-content: center;

		@media only screen and (max-width: 800px) {
			grid-template-columns: 1fr;
			align-items: center;
			justify-items: stretch;
			min-height: unset;
		}
	}

	.info.svelte-1x244kc {
		display: flex;
		flex-direction: column;
		align-items: start;
		width: 100%;
		margin: auto;
		gap: var(--gap-unrelated-sections);

		@media screen and (max-width: 800px) {
			grid-row: 2;
			align-items: center;
			text-align: center;
			gap: 1rem;
			max-width: 300px;
		}
	}

	.product-info.svelte-1x244kc {
		display: flex;
		flex-direction: column;
		align-items: start;
		width: 100%;
		margin: auto;
		gap: var(--gap-medium-related-blocks);

		@media screen and (max-width: 800px) {
			grid-row: 2;
			align-items: center;
			text-align: center;
			gap: 1rem;
			max-width: 300px;
		}
	}

	.highlights-info.svelte-1x244kc {
		display: flex;
		flex-direction: column;
		justify-content: start;
		gap: var(--gap-medium-related-blocks);

		@media screen and (max-width: 800px) {
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		@media screen and (max-width: 800px) {
			grid-row: 2;
			align-items: center;
			text-align: center;
			gap: 1rem;
			max-width: 300px;
		}
	}

	.media.svelte-1x244kc {
		position: relative;
		width: 100%;
		/* height: 80%; */
		gap: 1rem;

		display: flex;
		flex-direction: column;

		align-items: center;
		align-items: end;
		justify-content: center;
		aspect-ratio: 4 / 3;

		@media only screen and (max-width: 800px) {
			grid-row: 1;
			/* height: 38vh; */

			max-height: min(50dvh, 350px);
			/* max-height: 300px; */
		}
	}

	.headline.svelte-1x244kc {
		@media only screen and (max-width: 800px) {
			margin: unset;
		}
	}

	/* (unused) .icon {
		position: relative;
		width: 30px;
		margin-right: 1rem;
		shape-rendering: geometricPrecision;
	}*/

	img.svelte-1x244kc * {
		fill: var(--on-bg);
		stroke: var(--on-bg);
	}

	.row.svelte-1x244kc {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1rem;
	}

	.row.svelte-1x244kc {
		/* align-items: center; */
		justify-content: center;
		/* gap: 5rem; */
	}

	.action-buttons.svelte-1x244kc {
		@media only screen and (max-width: 800px) {
			/* margin-top: 0rem; */
			flex-direction: row-reverse;
			align-items: center;
			gap: 1rem;
		}
	}

	.host-app-icon.svelte-1x244kc {
		display: inline-block;
		width: 23px;
		/* height: 100%; */
		object-fit: contain;
		/* filter: saturate(0); */
		opacity: 1;
		/* filter: saturate(1) brightness(1.5); */
	}

	/* (empty) .host-app-icon:hover {
		/* filter: saturate(1) brightness(1.5); *\/
	}*/

	.host-app-icon.svelte-1x244kc:not(:hover) {
		transition: filter 0.25s ease-out;
	}

	.highlights-info.svelte-1x244kc:not(.inView) > * {
		opacity: 0;
	}

	.highlights-info.inView.svelte-1x244kc > * {
		animation: svelte-1x244kc-ghost-in 0.7s cubic-bezier(0.03, 0.02, 0, 0.98) both;
	}

	.highlights-info.svelte-1x244kc > *:nth-child(1) {
		animation-delay: 0.25s;
	}
	.highlights-info.svelte-1x244kc > *:nth-child(2) {
		animation-delay: 0.35s;
	}
	.highlights-info.svelte-1x244kc > *:nth-child(3) {
		animation-delay: 0.45s;
	}
	.highlights-info.svelte-1x244kc > *:nth-child(4) {
		animation-delay: 0.55s;
	}
	.highlights-info.svelte-1x244kc > *:nth-child(5) {
		animation-delay: 0.65s;
	}

	.price-arrow.svelte-1x244kc {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: end;
		padding-right: 15px;
		transition: opacity 0.2s ease-out;

		@media only screen and (max-width: 800px) {
			display: none;
		}
	}

	.price-arrow.svelte-1x244kc:not(:hover) {
		opacity: 0;
	}

	@keyframes svelte-1x244kc-headlineIn {
		from {
			opacity: 0;
			transform: translateX(10px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes svelte-1x244kc-ghost-in {
		from {
			transform: translateY(50%);
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.invisible.svelte-1x244kc {
		visibility: hidden;
	}

	.tagline-word.svelte-1x244kc {
		display: inline-block;
		position: relative;
	}