{# NOTE: This file is for Storybook display purposes only. #}

<div{{ attributes.addClass(['layout', 'layout--four-column']) }}>
  <div class="layout__content">
    {% if paragraph_layout_header %}
      <div class="layout__header">
        {{ paragraph_layout_header }}
      </div>
    {% endif %}

    <div class="layout__regions">
      <div class="layout__region layout__region--first layout__region--gap-sm">
        <div class="layout__region-item">{{ paragraph_layout_region_first }}</div>
      </div>

      <div class="layout__region layout__region--second layout__region--gap-sm">
        <div class="layout__region-item">{{ paragraph_layout_region_second }}</div>
      </div>

      <div class="layout__region layout__region--third layout__region--gap-sm">
        <div class="layout__region-item">{{ paragraph_layout_region_third }}</div>
      </div>

      <div class="layout__region layout__region--fourth layout__region--gap-sm">
        <div class="layout__region-item">{{ paragraph_layout_region_fourth }}</div>
      </div>
    </div>
  </div>
</div>
