<script lang="ts">
	let {
		species,
		img
	}: {species: string; img: string;} = $props();
</script>

<div class="grow colony">
	<div class="info">
		<h2>{species}</h2>
	</div>
	<img src={img} alt="" />
</div>

<style lang="scss">
	@use '$lib/styles/variables' as vars;
	.colony {
		// margin: 1em;
		border: 1px solid vars.$base-colour;
		display: flex;
		flex-direction: column;
		// align-items: center;
		gap: 1em;
		padding: 1em;
		h2 {
			// text-decoration: underline;
			// color: vars.$base-colour;
			margin-bottom: 0.2em;
			text-align: center;
		}
		img {
			width: 256px;
			min-width: 200px;
			height: 256px;
		}
	}

	.grow {
		transition: all 0.2s ease-in-out;
	}

	.grow:hover {
		transform: scale(1.03);
		border: 1px solid vars.$highlight;
	}
</style>
