<!-- row template -->
<QuixTemplate id="row-template">
  <QuixStyle>
    <!-- Global Style -->
    var style = Object.assign({}, Assets),
          id = "#{{ field("id") }}",
          css = "";
// margin
style.margin(id, {{ field("margin") | json_encode() }})

// padding 
style.padding(id, {{ field("padding") | json_encode() }})

// Z-Index
style.css(id, 'z-index', {{ field("zindex") | json_encode() }})

// background 
style.background (id, {{ field("background") | json_encode() }})

// border + box shadow 
style.border (id, {{ field("border") | json_encode() }})

// custom css 
style.raw ("{{ field("custom_css").code }}")
    <!-- Section Style -->
    {% include 'global.twig' %}

var row = Object.assign({}, Assets),
          id = "#{{ field("id") }}",
          css = "",
          backgroundOverlay = ".{{ field('id') }}-background-overlay";

// Custom height
var heightType = {{ field('height') | json_encode() }}

if( heightType == 'custom' ){
  row.minHeight(id, {{ field('custom_height') | json_encode() }})
}

// background overlay
style.background (backgroundOverlay, {{ field("background_overlay") | json_encode() }}, id)

// border + box shadow 
style.border (id, {{ field("border") | json_encode() }})

row.load(id);

// loading children ( COLUMN ) style...
{% if renderer %}
  {{ renderer.render( node['children'], null, 'frontend' ) | raw  }}
{% endif %}  </QuixStyle>
</QuixTemplate>