<script lang="ts">
	import Icon from '@iconify/svelte';

	export let bgStrong: string;
	export let bgBleak: string;
	export let icon: string;
	export let caption: string;
</script>

<section class="flex flex-col sm:flex-row">
	<div class="flex flex-row items-center gap-2 {bgStrong} p-2 text-slate-50">
		<Icon width={32} height={32} {icon} color={'#f8fafc'} />
		<span class="sm:hidden">{caption}</span>
	</div>
	<div class="{bgBleak} p-4 sm:grow">
		<slot />
	</div>
</section>
