{% set bgClass = 'section' %}

{# Set background class based on selection #}

{% if box.background_color == 'grey' %}
    {% set bgClass = bgClass ~ ' section--grey' %}
{% elseif box.background_color == 'orange' %}
    {% set bgClass = bgClass ~ ' section--orange' %}
{% elseif box.background_color == 'blue' %}
    {% set bgClass = bgClass ~ ' section--blue' %}
{% else %}
    {% set bgClass = bgClass ~ ' section--white' %}
{% endif %}

<section class="{{ bgClass }}">
    <div class="container container-md">
        {% if box.image_section %}
        <div class="square rounded-full overflow-hidden image-section margin-auto mb-30">
            <img src="{{ box.image_section|media }}" alt="{{ box.image_section }}" class="h-auto w-full object-cover object-center">
        </div>
        {% endif %}
        
        {% if box.title %}
            <h2 class="text-6xl mb-30 title-uppercase {% if box.image_section %}text-center{% endif %}">{{ box.title }}</h2>
            {% if box.subtitle %}
                <h3 class="text-3xl mb-30 font-secondary {% if box.image_section %}margin-auto text-center{% endif %}">{{ box.subtitle }}</h3>
            {% endif %}
        {% endif %}
        
        <div class="wysiwyg">
            {{ box.content|raw }}
        </div>
    </div>
</section>