<script>
	import '../app.scss';
</script>

<header>
	<section class="section">
		<div class="container is-max-desktop">
			<div class="columns">
				<div class="column is-two-thirds is-offset-one-fifth">
					<h1 class="title">Gabi und Hannes Fotochallenge</h1>
					<h2 class="subtitle">Lösungen für die Fotochallenge</h2>
				</div>
			</div>
		</div>
	</section>
</header>

<main id="wrapper">
	<section class="section">
		<div class="container is-max-desktop">
			<div id="content">
				<div class="columns">
					<div class="column is-half is-offset-one-quarter">
						<slot />
					</div>
				</div>
			</div>
		</div>
	</section>
</main>

<style>
	:global(body) {
		display: flex;
		min-height: 100vh;
		flex-direction: column;
	}

	#wrapper {
		flex: 1;
	}

	#content {
		text-align: justify;
		hyphens: auto;
	}
</style>
