{% macro render_node(node, gap) %}
  {% if node.__class__.__name__ == "ImageNode" %}
    {% with this=node.block %}
      {% include "blocks/gallery-image.html" %}
    {% endwith %}
  {% elif node.direction == "row" %}
    <div data-direction="row">
      <div style="--width: calc({{ node.first_width_share * 100 }}% + {{ node.first_gap_coefficient * gap }}rem)">
        {{ render_node(node.first, gap) }}
      </div>
      <div style="--width: calc({{ node.second_width_share * 100 }}% + {{ node.second_gap_coefficient * gap }}rem)">
        {{ render_node(node.second, gap) }}
      </div>
    </div>
  {% else %}
    <div data-direction="column">
      <div>{{ render_node(node.first, gap) }}</div>
      <div>{{ render_node(node.second, gap) }}</div>
    </div>
  {% endif %}
{% endmacro %}

{% set layout = this["images"].blocks
  | gallery_layout(
  record,
  target_ratio=this["target_ratio"]
  ) %}

{% if layout %}
  <div class="gallery{% if this["breakout"] != "none" %} breakout-{{ this["breakout"] }}{% endif %}"
       style="--gap: {{ this["gap"] }}rem">{{ render_node(layout, this["gap"]) }}</div>
{% endif %}