---
const { item } = Astro.props;
---

<div class="card">
	<div class="card-container">
		<div class="card__illustration">
			<img
				src={item.quickImage}
				width="150"
				height="150"
				alt=""
				aria-hidden="true"
			/>
		</div>
		<a href={`#${item.id}`} class="card__link clean-link">{item.quickTitle}</a>
	</div>
</div>

<style>
	.card {
		container-name: card;
		container-type: inline-size;
		inline-size: 100%;
		block-size: 100%;
	}
	.card-container {
		padding: var(--space-xs-s);
		position: relative;
		display: flex;
		block-size: 100%;
		flex-flow: column;
		align-items: center;
		text-align: center;
		gap: var(--space-xs);
		cursor: pointer;
		background-color: var(--color-light-blue);
		transform: translateY(0);
	}
	.card:focus-within {
		outline: dotted 3px var(--color-blue);
	}
	.card:focus-within .card__link:focus {
		outline: dotted 3px transparent;
	}
	.card__link {
		font-weight: normal;
		text-decoration: none;
		color: currentColor;
	}
	.card__link:hover {
		text-decoration: none;
	}
	.card__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	@media (prefers-reduced-motion: no-preference) {
		.card {
			transition: all ease 0.2s;
		}
		.card:hover {
			transform: translateY(-10px);
			box-shadow: var(--shadow-elevation-high);
		}
		.card:focus-within {
			transform: translateY(-10px);
		}
	}

	@container card (min-width: 20rem) {
		.card-container {
			flex-direction: row;
			text-align: left;
		}
		.card__illustration {
			max-inline-size: 100px;
		}
	}
</style>