---
let app = Astro.props.item;

let itemName = app.name.replace(" ", "");
---

<a id={itemName} data-id={app.name} href={app.link}>
	<div class="h-100 m-4">
		<img src={app.logo} alt={app.name} class="w-auto h-16 mx-auto my-2" />
		<h3 class="font-sans text-white text-center">{app.name}</h3>
	</div>
</a>

<style>
	@font-face {
		font-family: "Pixelated MS Sans Serif";
		src: url(https://unpkg.com/98.css@0.1.16/dist/ms_sans_serif.woff)
			format("woff");
		src: url(https://unpkg.com/98.css@0.1.16/dist/ms_sans_serif.woff2)
			format("woff2");
		font-weight: 400;
		font-style: normal;
	}
	h3 {
		font-weight: 300;
		/* font-family: Arial, sans-serif; */
	}

	a {
		cursor: pointer;
		user-select: none;
	}

	.link {
		width: 100%;
		height: 100%;

		z-index: 1;
	}
</style>
