{# @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' %}dce:py-12 dce:md:py-16{% elif size == 'lg' %}dce:py-24 dce:md:py-32{% else %}dce:py-16 dce:md:py-24{% endif %} {{ class }}" :attrs="attrs" only>
  {% if title %}
    <c-heading :eyebrow="eyebrow" :title="title" :lead="lead" level="{{ level }}" class="dce:mb-12" only />
  {% endif %}
  <div class="dce:columns-1 dce:gap-6 dce:*:mb-6 dce:*:break-inside-avoid dce:md:columns-2 dce:lg:columns-{{ columns }}">{{ slot }}</div>
</c-section>