{% set container_type = container_type|default('container mx-auto') %}

{% set grid_cols = grid_cols|default(12) %}
{% set grid_cols_2xl = grid_cols_2xl|default(12) %}
{% set grid_cols_xl = grid_cols_xl|default(12) %}
{% set grid_cols_lg = grid_cols_lg|default(12) %}
{% set grid_cols_md = grid_cols_md|default(12) %}
{% set grid_cols_sm = grid_cols_sm|default(12) %}
{% set gap = gap|default(0) %}
{% set gap_2xl = gap_2xl|default(4) %}
{% set gap_xl = gap_xl|default(4) %}
{% set gap_lg = gap_lg|default(4) %}
{% set gap_md = gap_md|default(2) %}
{% set gap_sm = gap_sm|default(0) %}
{% set grid_classes = ['grid', 'gap-4',  gap ? 'gap-' ~ gap, gap_2xl ? '2xl:gap-' ~ gap_2xl, gap_xl ? 'xl:gap-' ~ gap_xl, gap_lg ? 'lg:gap-' ~ gap_lg, gap_md ? 'md:gap-' ~ gap_md, gap_sm ? 'sm:gap-' ~ gap_sm, grid_cols ? 'grid-cols-' ~ grid_cols, grid_cols_2xl ? '2xl:grid-cols-' ~ grid_cols_2xl, grid_cols_xl ? 'xl:grid-cols-' ~ grid_cols_xl, grid_cols_lg ? 'lg:grid-cols-' ~ grid_cols_lg, grid_cols_md ? 'md:grid-cols-' ~ grid_cols_md, grid_cols_sm ? 'sm:grid-cols-' ~ grid_cols_sm] %}
{% set grid_classes_attributes = create_attribute().addClass(grid_classes) %}

{% set col_span = col_span|default([12, 12]) %}
{% set col_span_2xl = col_span_2xl|default([6, 6]) %}
{% set col_span_xl = col_span_xl|default([6, 6]) %}
{% set col_span_lg = col_span_lg|default([6, 6]) %}
{% set col_span_md = col_span_md|default([6, 6]) %}
{% set col_span_sm = col_span_sm|default([12, 12]) %}
{% set col_first_classes = [col_span[0] ? 'col-span-' ~ col_span[0], col_start[0] ? 'col-start-' ~ col_start[0], col_end[0] ? 'col-end-' ~ col_end[0], col_span_2xl[0] ? '2xl:col-span-' ~ col_span_2xl[0], col_start_2xl[0] ? '2xl:col-start-' ~ col_start_2xl[0], col_end_2xl[0] ? '2xl:col-end-' ~ col_end_2xl[0], col_span_xl[0] ? 'xl:col-span-' ~ col_span_xl[0], col_start_xl[0] ? 'xl:col-start-' ~ col_start_xl[0], col_end_xl[0] ? 'xl:col-end-' ~ col_end_xl[0], col_span_lg[0] ? 'lg:col-span-' ~ col_span_lg[0], col_start_lg[0] ? 'lg:col-start-' ~ col_start_lg[0], col_end_lg[0] ? 'lg:col-end-' ~ col_end_lg[0], col_span_md[0] ? 'md:col-span-' ~ col_span_md[0], col_start_md[0] ? 'md:col-start-' ~ col_start_md[0], col_end_md[0] ? 'md:col-end-' ~ col_end_md[0], col_span_sm[0] ? 'sm:col-span-' ~ col_span_sm[0], col_start_sm[0] ? 'sm:col-start-' ~ col_start_sm[0], col_end_sm[0] ? 'sm:col-end-' ~ col_end_sm[0]] %}
{% set col_first_attributes = create_attribute().addClass(col_first_classes) %}
{% set col_second_classes = [col_span[1] ? 'col-span-' ~ col_span[1], col_start[1] ? 'col-start-' ~ col_start[1], col_end[1] ? 'col-end-' ~ col_end[1], col_span_2xl[1] ? '2xl:col-span-' ~ col_span_2xl[1], col_start_2xl[1] ? '2xl:col-start-' ~ col_start_2xl[1], col_end_2xl[1] ? '2xl:col-end-' ~ col_end_2xl[1], col_span_xl[1] ? 'xl:col-span-' ~ col_span_xl[1], col_start_xl[1] ? 'xl:col-start-' ~ col_start_xl[1], col_end_xl[1] ? 'xl:col-end-' ~ col_end_xl[1], col_span_lg[1] ? 'lg:col-span-' ~ col_span_lg[1], col_start_lg[1] ? 'lg:col-start-' ~ col_start_lg[1], col_end_lg[1] ? 'lg:col-end-' ~ col_end_lg[1], col_span_md[1] ? 'md:col-span-' ~ col_span_md[1], col_start_md[1] ? 'md:col-start-' ~ col_start_md[1], col_end_md[1] ? 'md:col-end-' ~ col_end_md[1], col_span_sm[1] ? 'sm:col-span-' ~ col_span_sm[1], col_start_sm[1] ? 'sm:col-start-' ~ col_start_sm[1], col_end_sm[1] ? 'sm:col-end-' ~ col_end_sm[1]] %}
{% set col_second_attributes = create_attribute().addClass(col_second_classes) %}

{% set attributes = attributes.addClass(background_size, background_position, background_repeat) %}

{% if background_image %}
  {% set attributes = attributes.setAttribute('style', 'background-image: url(' ~ background_image ~ ')') %}
{% endif %}

<section {{ attributes.addClass(container_type != 'bg-breakout' ? grid_classes, container_type) }} >
{% if container_type == 'bg-breakout' %}
  <div {{ grid_classes_attributes.addClass('container', 'mx-auto') }} >
{% endif %}
  <div {{ col_first_attributes }}>
    {{ col_first }}
  </div>
  <div  {{ col_second_attributes }}>
    {{ col_second }}
  </div>
{% if container_type == 'bg-breakout' %}
  </div>
{% endif %}
</section>
