{# brutalist feature-grid override — bordered slabs with hard offset shadow. Fields: eyebrow, heading, intro, columns, layout, items[] (icon, title, text, linkUrl, linkLabel). Keeps builtin icon split + literal conditional column classes. #}
<section class="bru-section bg-background text-foreground{% if class %} {{ class }}{% endif %}">
  <div class="bru-wrap">
    {% if eyebrow %}<span class="bru-tag mb-4">{{ eyebrow }}</span>{% endif %}
    {% if heading %}<h2 class="bru-kicker" style="font-size:clamp(1.75rem,4vw,3rem)">{{ heading }}</h2>{% endif %}
    {% if intro %}<p class="mt-3 text-lg text-muted-foreground" style="max-width:44rem">{{ intro }}</p>{% endif %}
    <div class="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 {% if columns == 2 %}lg:grid-cols-2{% elif columns == 4 %}lg:grid-cols-4{% else %}lg:grid-cols-3{% endif %}">
      {% for item in items %}
      <div class="bru-slab bru-shadow bru-hover flex flex-col gap-2 p-6{% if layout == "centered" %} text-center items-center{% endif %}">
        {% if item.icon %}<div class="mb-2 inline-flex h-12 w-12 items-center justify-center bg-accent text-accent-foreground" style="border:3px solid hsl(var(--border))"><svg class="h-6 w-6" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg></div>{% endif %}
        <h3 class="bru-kicker" style="font-size:1.15rem;text-transform:none">{% if item.linkUrl %}<a href="{{ item.linkUrl }}" class="transition-colors hover:text-accent">{{ item.title }}</a>{% else %}{{ item.title }}{% endif %}</h3>
        {% if item.text %}<p class="text-muted-foreground">{{ item.text }}</p>{% endif %}
        {% if item.linkUrl and item.linkLabel %}<a href="{{ item.linkUrl }}" class="bru-meta mt-2 inline-flex items-center gap-1 text-accent">{{ item.linkLabel }} →</a>{% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
</section>