website/src/lib/Card/CardInner.svelte

<script lang="ts">
	export let title: any;
	export let position: any;
	export let description: any;
	export let icon: any;
</script>

<div class="card-inner">
	<div class="main">
		{#if icon}
			<div>
				<img src={icon} alt="{title} icon" />
			</div>
		{/if}
		<div>
			<span>
				{title}

				{#if position}
					- {position}
				{/if}
			</span>

			{#if description}
				<p class="description">{description}</p>
			{/if}
		</div>
	</div>
	<slot />
</div>

<style>
	.card-inner {
		background-color: var(--secondary);
		border-radius: 10px;
		padding: 1rem;
		width: 30em;
		display: flex;
		flex-direction: column;
	}

	@media screen and (max-width: 555px) {
		.card-inner {
			width: 18em;
		}
	}

	.main {
		flex: 1;
		display: flex;
		flex-direction: row;
		gap: 1rem;
	}

	img {
		height: 5rem;
		border-radius: 10px;
	}

	span {
		font-size: 25px;
		font-weight: bold;
	}
</style>