{% set bgClass = 'section' %}

{# Set background class based on selection #}
{% if box.background_color == 'custom' and box.custom_bg_color %}
    {% set bgStyle = 'background-color: ' ~ box.custom_bg_color ~ ';' %}
{% elseif 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">
        <div class="grid grid-cols-2 gap-30 items-center">
            <div class="pt-15 {% if box.image_position == 'left' %}order-2{% endif %}">
                {% if box.title %}
                    <h2 class="text-6xl mb-30 title-uppercase">{{ box.title }}</h2>
                    {% if box.subtitle %}
                        <h3 class="text-3xl mb-30 font-secondary">{{ box.subtitle }}</h3>
                    {% endif %}
                {% endif %}
                <div class="wysiwyg">
                    {{ box.content|raw }}
                </div>
            </div>
            <div class="{% if box.image_position == 'left' %}order-1{% endif %}">
                <img src="{{ box.image_section|media }}" alt="{{ box.title }}" class="w-full h-auto">
            </div>
        </div>
    </div>
</section>