{# @description The outer shell of a region of a page: full width, with a background layer behind it and its content held to a chosen width. Put section.col components in it and they sit side by side. #}
{# @prop height:select['content', 'screen'] | default:"content" | description:"content is as tall as what the section holds. screen is at least as tall as the window, with the content centred in it." #}
{# @prop flush:boolean | default:False | description:"Drop the room above and below the content, for columns that carry surfaces of their own and should meet the sections around them" #}
{# @prop container:select['narrow', 'default', 'wide', 'full'] | default:"default" | description:"How wide the content may grow. The section itself, and its background, always span the page. narrow is a comfortable line of text. full runs to the edges of the page with no gutter, for columns that carry surfaces of their own." #}
{# @prop gap:select['none', 'sm', 'md', 'lg'] | default:"md" | description:"The room between columns, and between them once they have stacked" #}
{# @prop align:select['stretch', 'start', 'center', 'end'] | default:"stretch" | description:"Where columns of different heights sit against each other" #}
{# @prop reverse:boolean | default:False | description:"Run the columns the other way at wide widths, so the last one written comes first. No effect once they have stacked: on a phone the columns always read in the order written." #}
{# @prop invert:boolean | default:False | description:"Light copy, for a dark background. Each background says whether it wants this." #}
{# @prop class:text | description:"Extra classes on the outer section. A plain surface colour goes here: bg-base-200." #}
{# @slot Copy
Media
— The content. Anything at all, or one section.col for each column. #}
{# @slot:background — A background block, rendered into a layer behind the content #}
{# @slot:header — Above the columns, across the whole width. A heading for the section, usually. #}
{% comment %}
The columns are counted by the stylesheet, not here: the body turns into a
grid only when a section.col is its direct child, and each one opens a
column of its own. Below the lg breakpoint they are one column, in the order
written, and `reverse` does nothing there. `reverse` reaches six columns.
A section inside another drops its gutters, so the two do not add up, and
its vertical padding. It keeps the copy colour of the
section around it unless it inverts for itself.
{% endcomment %}
{% if background %}
{{ background }}
{% endif %}
{% if header %}
{{ header }}
{% endif %}
{{ slot }}