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

<Head
  title="terms.of.service.seo.title"
  description="terms.of.service.seo.description"
  keywords="terms.of.service.seo.keywords"
  url="terms.of.service.seo.url"
/>

<section aria-labelledby="tos-heading">
  <h1 id="tos-heading">{$t('terms.of.service.title')}</h1>
  <p><em>{$t('terms.of.service.update')}</em></p>

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

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

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