{#
/**
 * @file
 * Template for a complex column panel layout.
 *
 * This template provides a complex column panel display layout with a single
 * cell top most column followed by a 3 column layout where a 2 column span
 * header region is above two single column regions and a right sidebar.
 *
 * Variants:
 * layout-blastila--right - A right sidebar variant to the layout.
 *
 * Variables:
 * attributes - html attributes for the template wrapper tag
 * modifier_class - Variant modifier css classes
 * header -  A single cell centered columns
 * sidebar - A 1/3 row right sidebar open content region
 * first - A 2/3 row section below the header and to the left of the sidebar.
 * second - A 1/3 column content region below the first region.
 * third - A 1/3 column content region below the first region.
 *
 */
#}
<div{{ attributes }} class="layout {{ modifier_class }}">

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

  {# Div for grid container #}
  <div class="flex-container centered-container">

    <div class="flex-4-of-12 ">
      {# Sidebar #}
      {% if sidebar is not empty %}
      <aside class="flex-12-of-12">
        {{ sidebar }}
      </aside>
      {% endif %}
    </div>

    <div class="flex-8-of-12 ">
      <div class="flex-container flex-container--row-gap">
        {# Mini header area #}
        {% if first is not empty %}
        <section class="flex-12-of-12">
          {{ first }}
        </section>
        {% endif %}

        {# Left content column #}
        {% if second is not empty %}
        <div class="flex-6-of-12">
          {{ second }}
        </div>
        {% endif %}

        {# Right content column #}
        {% if third is not empty %}
        <div class="flex-6-of-12">
          {{ third }}
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {# end grid container #}
</div>
