<script>
  import { t } from '$lib/translations';

  import Seo from '$lib/components/Seo.svelte';

  /** @type {import('./$types').PageProps} */
  let { data } = $props();

  // svelte-ignore state_referenced_locally
  const metadata = data.metadata;
</script>

<Seo {...metadata} />

<section aria-labelledby="about-heading">
  <h1 id="about-heading">{$t('about.title')}</h1>

  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
  {@html $t('about.content')}
</section>

<style>
  section {
    width: 70%;
    margin: 0 auto;
  }

  h1 {
    padding: 0;
    margin-bottom: 7px;
  }

  @media (max-width: 768px) {
    section {
      width: 90%;
    }
  }
</style>
