{{ define "timeline/fragments/goodfirstissues" }}
  {{ if .GfiLabel }}
    <a href="/goodfirstissues" class="no-underline hover:no-underline">
      <div class="flex items-center justify-between gap-2 bg-purple-200 dark:bg-purple-900 border border-purple-400 dark:border-purple-500 rounded mb-4 py-4 px-6 ">
        <div class="flex-1 flex flex-col gap-2">
          <p>
            Make your first contribution to an open-source project.
            <em>good-first-issue</em> helps new contributors find easy ways to
            start contributing to open-source projects.
          </p>
          <span class="flex items-center gap-2 text-purple-500 dark:text-purple-400">
            Browse issues {{ i "arrow-right" "size-4" }}
          </span>
        </div>
        <div class="hidden md:block relative px-16 scale-150">
          <div class="relative opacity-60">
            {{ template "labels/fragments/label" (dict "def" .GfiLabel "val" "" "withPrefix" true) }}
          </div>
          <div class="relative -mt-4 ml-2 opacity-80">
            {{ template "labels/fragments/label" (dict "def" .GfiLabel "val" "" "withPrefix" true) }}
          </div>
          <div class="relative -mt-4 ml-4">
            {{ template "labels/fragments/label" (dict "def" .GfiLabel "val" "" "withPrefix" true) }}
          </div>
        </div>
      </div>
    </a>
  {{ end }}
{{ end }}