{#
/**
 * @file
 * Theme override for a four column layout.
 *
 * This template provides a four column display layout, with
 * tailwind classes.
 *
 * Available variables:
 * - in_preview: Whether the plugin is being rendered in preview mode.
 * - content: The content for this layout.
 * - attributes: HTML attributes for the layout <div>.
 */
#}
{%
  set classes = [
    'layout',
    'layout--tailwind-fourcol',
  ]
%}
{% if content %}
  <div{{ attributes.addClass(classes) }}>
    <div class="flex flex-wrap flex-col lg:flex-row gap-4">
      {% if content.first %}
        <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'flex-1') }}>
          {{ content.first }}
        </div>
      {% endif %}

      {% if content.second %}
        <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'flex-1') }}>
          {{ content.second }}
        </div>
      {% endif %}

      {% if content.third %}
        <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third', 'flex-1') }}>
          {{ content.third }}
        </div>
      {% endif %}

      {% if content.fourth %}
        <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth', 'flex-1') }}>
          {{ content.fourth }}
        </div>
      {% endif %}
    </div>
  </div>
{% endif %}
