{{ define "main" }}
<section class="product-hero">
  <div class="container">
    {{ with .Params.eyebrow }}<div class="hero-eyebrow eyebrow">{{ . }}</div>{{ end }}
    <h1>{{ .Title }}</h1>
    {{ with .Params.lead }}<p class="lead">{{ . }}</p>{{ end }}
  </div>
</section>

<div class="page-content">
  <div class="container" style="max-width: var(--max-width);">
    {{ .Content }}
    <div class="card-grid mt-4">
      {{ range .Pages }}
      <a class="card" href="{{ .RelPermalink }}" style="text-decoration:none; color:inherit;">
        {{ with .Params.icon }}<div class="card-icon">{{ . }}</div>{{ end }}
        <h3>{{ .Title }}</h3>
        <p>{{ .Description }}</p>
        <div class="card-footer">
          {{ with .Params.badge }}<span class="badge badge-{{ .color }}">{{ .text }}</span>{{ end }}
        </div>
      </a>
      {{ end }}
    </div>
  </div>
</div>
{{ end }}