{% extends "@Contao/content_element/_base.html.twig" %}
{% import "@ContaoCore/Image/Studio/_macros.html.twig" as studio %}

{% block content %}
    {% block background %}
        <div class="content-background-wrapper-bg">
            {% if background_figure is defined %}
                {{- studio.figure(background_figure) -}}
            {% endif %}
            {% if background_video is defined %}
                <figure>
                    <video autoplay muted loop playsinline>
                        <source src="{{ background_video.path }}" type="video/{{ background_video.extension }}">
                    </video>
                </figure>
            {% endif %}
        </div>
    {% endblock %}

    {% block foreground %}
        <div id="content-background-wrapper-fg--{{ data.id }}" class="content-background-wrapper-fg">
            <div class="content-grid">
                <div class="fragments">
                    {% for fragment in nested_fragments %}
                        {{ content_element(fragment) }}
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endblock %}
{% endblock %}

{% block script %}
    {% if minHeight_ratio is defined %}
        {% add to head %}
            <style>
                {##content-background-wrapper-fg--{{ data.id }} { display: flow-root; }#}
                #content-background-wrapper-fg--{{ data.id }}::before {
                    display: table;
                    content: "";
                    padding-top: {{ minHeight_ratio }}%;
                    float: left;
                }
            </style>
        {% endadd %}
    {% endif %}
{% endblock %}