{# @description Many quotations at once, packed into columns so that long and short ones sit together without gaps. #}
{# @prop eyebrow:text | description:"Short line above the heading" #}
{# @prop title:text | description:"The heading. Left empty, the wall has no header." #}
{# @prop lead:text | description:"The supporting sentence under the heading" #}
{# @prop level:select['1', '2', '3', '4', '5', '6'] | default:"2" | description:"Heading level" #}
{# @prop columns:select['2', '3', '4'] | default:"3" | description:"How many columns at wide widths. One on a phone, two on a tablet." #}
{# @prop size:select['sm', 'md', 'lg'] | default:"md" | description:"How much vertical room the block takes" #}
{# @prop class:text | description:"Extra classes on the outer section. A plain surface colour goes here: bg-base-200." #}
{# @slot The quotations — One card after another. Each is kept whole and never split across two columns. #}
{% comment %}
  Columns, not a grid: a grid row is as tall as its longest quotation and leaves
  a hole under every shorter one. The cost is reading order, which runs down
  each column in turn and not across.
{% endcomment %}
<c-vars eyebrow title lead level="2" columns="3" size="md" class />
<c-section flush container="wide" class="{% if size == 'sm' %}py-12 md:py-16{% elif size == 'lg' %}py-24 md:py-32{% else %}py-16 md:py-24{% endif %} {{ class }}" :attrs="attrs" only>
  {% if title %}
    <c-heading :eyebrow="eyebrow" :title="title" :lead="lead" level="{{ level }}" class="mb-12" only />
  {% endif %}
  <div class="columns-1 gap-6 *:mb-6 *:break-inside-avoid md:columns-2 lg:columns-{{ columns }}">{{ slot }}</div>
</c-section>