{% load design_system_tags wagtailcore_tags wagtailimages_tags %}
{% image value.bg_image original as bg_img %}
<div class="design-system-py-5w design-system-my-5w"
     {% if value.bg_color_class or bg_img or value.bg_color %}style="background:{% endif %}
     {% if bg_img %}no-repeat center url({{ bg_img.url }}){% endif %}
     {% if value.bg_color_class %} var(--background-alt-{{ value.bg_color_class }}) {% elif value.bg_color %}{{ value.bg_color }}{% endif %}
     {% if value.bg_color_class or bg_img or value.bg_color %};"{% endif %}>
  <div class="design-system-container">
    {% if value.title %}
      <div class="design-system-grid-row design-system-grid-row--gutters">
        <div class="design-system-col-12 design-system-mt-3w">
          <{{ value.heading_tag|default:"h2" }}>{{ value.title }}</{{ value.heading_tag|default:"h2" }}>
        </div>
      </div>
    {% endif %}
    <div class="design-system-grid-row design-system-grid-row--gutters design-system-py-3w">
      {% for subblock in value.columns %}
        {% if subblock.block_type == 'text' %}
          <div class="design-system-col-12 design-system-col-sm">{{ subblock.value|richtext }}</div>
        {% elif subblock.block_type == 'video' %}
          <div class="design-system-col-12 design-system-col-sm">
            <h2>{{ subblock.value.title }}</h2>
            {% include_block subblock %}
          </div>
        {% else %}
          <div class="design-system-col-12 design-system-col-sm">{% include_block subblock %}</div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>
