{#
/**
 * @file
 * Template for a complex column panel layout.
 *
 * This template provides a complex column panel display layout, with
 * each column roughly equal in width.
 *
 * Variables:
 * -
 * -
 *
 *
 *
 */
#}
<div{{ attributes }} class="layout {{ modifier_class }}">

  {# Optional Header #}
  {% if header is not empty %}
  <header class="flex-container centered-container">
    <div class="flex-12-of-12">
      {{ header }}
    </div>
  </header>
  {% endif %}

  {# Required content section #}
  <section class="flex-container centered-container">
    <div class="flex-md-6-of-12">
      {{ first }}
    </div>

    <div class="flex-md-6-of-12">
      {{ second }}
    </div>
  </section>

  {# Optional centered container #}
  {% if middle is not empty %}
  <section class="flex-container centered-container">
    <div class="flex-12-of-12">
    {{ middle }}
    </div>
  </section>
  {% endif %}

  {# Optional third row #}
  {% if third is not empty %}
  <section class="flex-container centered-container">
    <div class="flex-md-6-of-12">
      {{ third }}
    </div>

    <div class="flex-md-6-of-12">
      {{ fourth }}
    </div>
  </section>
  {% endif %}

  {# Optional footer #}
  {% if footer is not empty %}
  <footer class="flex-container centered-container">
    <div class="flex-12-of-12">
      {{ footer }}
    </div>
  </footer>
  {% endif %}

</div>{# end layout wrapper #}
