<script>
  import { t } from '$lib/translations';
  import Head from '$lib/components/Head.svelte';
</script>

<Head
  title="privacy.policy.seo.title"
  description="privacy.policy.seo.description"
  keywords="privacy.policy.seo.keywords"
  url="privacy.policy.seo.url"
/>

<section aria-labelledby="privacy-policy-heading">
  <h1 id="privacy-policy-heading">{$t('privacy.policy.title')}</h1>
  <p><em>{$t('privacy.policy.last.update')}</em></p>

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

<style>
  section {
    width: 70%;
    margin: 0 auto;
    margin-top: 130px;
  }
  h2 {
    font-size: 17px;
  }

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