{#
/**
 * @file
 * A three column layout with a two column content area topped with a 2 span
 * header area and footed by a two span content aread and a top to bottom
 * of content sidebar region.
 *
 * Variants:
 * layout-cuttoner-flex--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 two span 66% topper for the first and second columns.
 * first - A single 33% width column
 * second - A single 33% width column
 * footer - A two span 66% footer for the first and second columns
 * sidebar - A 33% multiple row spanning sidebar
 *
 */
#}
<div{{ attributes }} class="layout {{ modifier_class }}">

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

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

        {% if first is not empty %}
          <div class="flex-6-of-12">
            {{ first }}
          </div>
        {% endif %}

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

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

  </div>
</div>
