{% if box['Title']['value'] is not empty and box['Image']['value'] is not empty %}

    <div class="ctaBox">

        {% if box['URL']['value'] is not empty %}
            <a 
                    href="{{ box['URL']['value'] }}" 
                    class="ctaBox__box {% if box['Light Text']['value'] == '1' %}darkBg{% endif %}"
            >
        {% else %}
                <div class="ctaBox__box {% if box['Light Text']['value'] == '1' %}darkBg{% endif %}">
        {% endif %}
                    

            <div class="ctaBox__header">

                {% if box['Title']['value'] is not empty %}
                    <h2 class="ctaBox__title">
                        {{ box['Title']['value'] }}
                    </h2>
                {% endif %}

                {% if box['Content']['value'] is not empty %}
                    <div class="ctaBox__content wysiwyg">
                        {{ box['Content']['value']|raw }}
                    </div> <!-- .wysiwyg -->
                {% endif %}

            </div> <!-- .contentBox -->
            
            
            
            <picture class="ctaBox__imageWrap">
                
                <img
                        src="/{{ image_folders['cms_images']['cta_box']['path'] }}/{{ box['Image']['value'] }}"
                        alt="{{ box['Image']['alt'] }}"
                        loading="lazy"
                        width="418"
                        height="637"
                >

            </picture> <!-- .imageWrap -->

            

        {% if box['URL']['value'] is not empty %}
            </a>
        {% else %}
            </div> <!-- .ctaBox__box -->
        {% endif %}

    </div> <!-- .ctaBox -->

{% endif %}
