<script>
	import Form from '$lib/form/Form.svelte';
	import Preview from '$lib/preview/Preview.svelte';

	let template = 'verde';
</script>

<svelte:head>
	<title>Carteles DMD</title>
	<meta
		name="description"
		content="Aplicación para la generación automática de carteles de actividades de DMD"
	/>
</svelte:head>

<div class="main">
	<section class="form"><Form /></section>
	<section class="preview"><Preview /></section>
</div>

<style>
	.main {
		display: grid;
		grid-template-columns: minmax(200px, 1fr) minmax(480px, min-content);
		grid-gap: 0.5rem;
		min-height: calc(100vh - 5rem);
	}

	.form {
		grid-column: 1/2;
		background-color: rgb(230, 240, 240);
	}

	.preview {
		grid-column: 2/3;
		min-height: 200px;
		background-color: rgb(240, 238, 240);
	}
</style>
