{{/*
  A grid of cards: `items`, each with `title`, `body`, optional `label`
  (a small tag above the title), `image`, and `link` (+ `linktext`).
  Without an image, `visual: true` draws a gradient panel in its place.
*/}}
{{ $s := . }}
{{ partial "sections/head.html" $s }}
<ul class="card-grid{{ with $s.columns }} cols-{{ . }}{{ end }}">
  {{ range $i, $c := $s.items }}
  <li class="card{{ if or $c.image $s.visual }} has-visual{{ end }}">
    {{ with $c.image }}<img class="card-visual" src="{{ . | relURL }}" alt="" loading="lazy">
    {{ else }}{{ if $s.visual }}<span class="card-visual card-art" style="--i:{{ $i }}" aria-hidden="true"></span>{{ end }}{{ end }}
    <div class="card-body">
      {{ with $c.label }}<span class="card-label">{{ . }}</span>{{ end }}
      <h3 class="card-title">{{ $c.title | markdownify }}</h3>
      {{ with $c.body }}<p class="card-text">{{ . | markdownify }}</p>{{ end }}
      {{ with $c.link }}<a class="more card-link" href="{{ . | relURL }}">{{ replaceRE `\s*[→↗]\s*$` "" ($c.linktext | default "Learn more") }}<span class="arrow" aria-hidden="true">→</span></a>{{ end }}
    </div>
  </li>
  {{ end }}
</ul>
{{ if $s.ctas }}<div class="cta-row">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}