ya añade varios elementos sobre una imagen que no se adapta al tamaño de la pantalla sino que es más fija que el copón

src/lib/form/Form.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { title } from '$lib/stores/store';
+    import { title, heading, subtitle, content, date, address } from '$lib/stores/store';
 
     const handleSubmit = async () => {
 	console.log('submit');
@@ -7,11 +7,29 @@
 </script>
 
 <form on:submit|preventDefault={handleSubmit}>
+    <div class="form-group">
+	<label for="heading">Antetítulo</label>
+	<input bind:value={$heading} type="text" name="heading" placeholder="Antetítulo" />
+    </div>
+    <div clasS="form-group">
 	<label for="title">Título</label>
 	<input bind:value={$title} type="text" name="title" placeholder="Título" />
+    </div>
+    <div class="form-group">
+	<label for="subtitle">Subtítulo</label>
+	<input bind:value={$subtitle} type="text" name="subtitle" placeholder="Subtítulo" />
+    </div>
+    <div class="form-group">
+	<label for="content">Contenido</label>
+	<input bind:value={$content} type="text" name="content" placeholder="Contenido" />
+    </div>
 </form>
 
 <style>
+    .form-group {
+	margin: 2rem 0;
+    }
+
     form {
 	margin: 1rem;
 	display: block;

src/lib/preview/Preview.svelte

@@ -6,6 +6,10 @@
     <div class="result">
 	<div class="heading">{$heading}</div>
 	<div class="title">{$title}</div>
+	<div class="subtitle">{$subtitle}</div>
+	<div class="content">{$content}</div>
+	<div class="date">{$date}</div>
+	<div class="address">{$address}</div>
     </div>
 </div>
 
@@ -20,7 +24,7 @@
     .result {
 	display: block;
 	aspect-ratio: 1/1.4142;
-	max-height: 92vh;
+	min-height: 842px;
 	align-self: center;
 	background-color: lightblue;
 	width: auto;
@@ -28,24 +32,47 @@
 	background-size: contain;
 	position: relative;
 	padding: 1rem;
+	box-shadow: 0 0 16px 0 rgba(0,0,0,0.3);
+	border-radius: 0.5rem;
+    }
+
+    .heading {
+	position: absolute;
+	top: 300px;
+	left: 1rem;
+	right: 1rem;
+	font-size: 1rem;
+	color: grey;
+	font-variant: small-caps;
     }
 
     .title {
 	position: absolute;
-	top: 370px;
+	top: 320px;
 	left: 1rem;
+	right: 1rem;
 	font-family: 'Gill Sans', sans-serif;
-	font-size: 2.5rem;
+	font-size: 2.8rem;
 	font-variant: small-caps;
-	right: 1rem;
+	line-height: 2.5rem;
+	color: firebrick;
+	font-weight: 600;
+    }
+    .subtitle {
+	position: absolute;
+	top: 410px;
+	left: 1rem;
+	right: 2rem;
+	font-size: 1.3rem;
+	color: #565;
     }
 
-    .heading {
+    .content {
 	position: absolute;
-	top: 350px;
+	top: 500px;
 	left: 1rem;
-	right: 1rem;
+	right: 16rem;
-	font-size: 2rem;
+	font-size: 1rem;
-	color: grey;
+	color: #222;
-	font-variant: small-caps;}
+	line-height: 1.5rem;}
 </style>

src/routes/+layout.svelte

@@ -16,9 +16,4 @@
 	box-sizing: border-box;
     }
 
-    @media (min-width: 480px) {
-	footer {
-	    padding: 40px 0;
-	}
-    }
 </style>

src/routes/+page.svelte

@@ -1,7 +1,6 @@
 <script>
     import Form from '$lib/form/Form.svelte'
     import Preview from '$lib/preview/Preview.svelte'
-    import Header from '$lib/header/Header.svelte'
 </script>
 
 <svelte:head>
@@ -17,7 +16,7 @@
 <style>
     .main {
 	display: grid;
-	grid-template-columns: 2fr 3fr;
+	grid-template-columns: minmax(200px, 1fr) minmax(480px, min-content);
 	grid-gap: 0.5rem;
 	min-height: calc(100vh - 5rem);
     }
@@ -31,23 +30,4 @@
 	min-height: 200px;
 	background-color: rgb(240,238,240);
     }
-    h1 {
-	width: 100%;
-    }
-
-    .welcome {
-	display: block;
-	position: relative;
-	width: 100%;
-	height: 0;
-	padding: 0 0 calc(100% * 495 / 2048) 0;
-    }
-
-    .welcome img {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	display: block;
-    }
 </style>