<script lang="ts">
  import {t} from "$lib/translations";
  import Project from "./Project.svelte";
  import {projects} from "./projects";
</script>

<section class="px-2 md:px-8 mb-16 max-w-[1280px] mx-auto">
  <h2 class="text-3xl mb-4 md:text-4xl">
    {$t('projects.h')}
  </h2>

  <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
    {#each projects as project}
      <Project
        project={project}
      ></Project>
    {/each}
  </div>
</section>
