{#
/**
 * @file
 * Template for Column component.
 */
#}
{% set sizes = {
  xs: xs,
  sm: sm,
  md: md,
  lg: lg,
  xl: xl,
  xxl: xxl,
} %}

{% set offsets = {
  xs: offset_xs,
  sm: offset_sm,
  md: offset_md,
  lg: offset_lg,
  xl: offset_xl,
  xxl: offset_xxl,
} %}

{% set classes = [
  align ? 'kern-align-items-' ~ align,
] %}

{% set has_size = false %}
{% for breakpoint, size in sizes %}
  {% if size and size > 0 and size <= 12 %}
    {% set classes = classes|merge(['kern-col-' ~ breakpoint ~ '-' ~ size]) %}
    {% set has_size = true %}
  {% endif %}
{% endfor %}

{% if not has_size %}
  {% set classes = classes|merge(['kern-col']) %}
{% endif %}

{% for breakpoint, offset in offsets %}
  {% if offset and offset > 0 and offset <= 12 %}
    {% set classes = classes|merge(['kern-col-' ~ breakpoint ~ '-offset-' ~ offset]) %}
  {% endif %}
{% endfor %}

<div {{ attributes.addClass(classes) }}>
  {{ content }}
</div>

