<template>
	<div class="card">
		<slot name="header">
		</slot>
		<slot name="content">
		</slot>
	</div>
</template>

<script setup>
</script>

<style scoped>
.card {
	width: 200px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	display: flex;
	justify-content: space-between;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
	background-color: var(--theme-surface-alt);
}

.card:hover {
	/*transform: translateY(-2px);*/
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
</style>
