src/components/HowItWorksCard.svelte


pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-colo<script>
  import Icon from "./Icon.svelte";
  import { t } from "$lib/translations";
  let { image, stepID } = $props();
</script>

<div class="space-y-5">
  <iconify-icon icon={image} class="mx-auto" width="128"></iconify-icon>
  <p class="text-2xl font-medium">{$t("howItWorks." + stepID + ".header")}</p>
  <p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
    {$t("howItWorks." + stepID + ".description")}
  </p>
</div>