{% extends 'xprez/contents/base.html' %}

{% block css_class_extra %}
    xprez-grid-boxes
    columns-{{ content.columns }}
    {{ content.width }}-width
    margin-{{ content.margin }}
    textsize-{{ content.text_size }}
    image-sizing-{{ content.image_sizing }}
    {% if content.padded %}padded{% endif %}
    {% if content.content_centered %}centered{% endif %}
    {% if content.boxes_filled %}boxes_filled{% endif %}
    {% if content.border %}border{% endif %}
{% endblock %}

{% block attrs_extra %}
    {% if content.image_sizing == "icon" and content.image_max_width %}
        style="--xprez-gridbox-item-image-width: {{ content.image_max_width }}px;"
    {% endif %}
{% endblock %}

{% block content_in %}
    {% for box in rendered_boxes %}
        <div class="xprez-grid-box">
            <div class="xprez-grid-box-inner">{{ box }}</div>
        </div>
    {% endfor %}
{% endblock %}
