{% if not ( title is defined and title | length ) %}
    {% set title = 'content-panel-wrapper' %}
{% endif %}

{% if not ( panelId is defined and panelId | length ) %}
    {%  if loop is defined %}
        {% set panelId = (title | capitalize | camel) ~ loop.index0 %}
    {% else %}
        {% set panelId = (title | capitalize | camel) %}
    {% endif %}
{% endif %}

{# Section Styling Variable - Used for styling top section element #}
{% if not ( sectionStyling is defined and sectionStyling | length ) %}
    {% set sectionStyling = '' %}
{% endif %}

{# Horizontal Padding Variable #}
{% if not ( horizontalPadding is defined and horizontalPadding | length ) %}
    {% set horizontalPadding = 'px-6 lg:px-8' %}
{% endif %}

{# Vertical Padding Variable #}
{% if not ( verticalPadding is defined and verticalPadding | length) %}
    {% set verticalPadding = 'py-8 lg:py-10' %}
{% endif %}

{# Container Variable #}
{% if not ( container is defined and container | length ) %}
    {% set container = 'max-w-8xl' %}
{% endif %}

{# Panel Visibility Variable - Use if minimum content req's aren't found to hide section #}
{% if not ( panelVisibility is defined and panelVisibility | length ) %}
    {% set panelVisibility = '' %}
{% endif %}

<section id="{{ panelId }}" class="{{ title }}{{ sectionStyling | length ? (' ' ~ sectionStyling) }}{{ panelVisibility | length ?  (' ' ~ panelVisibility) }}">
    <div class="container-wrapper mx-auto {{ container }}">
        <div class="padding-wrapper {{ horizontalPadding }} {{ verticalPadding }}">
            {% block content %}{% endblock %}
        </div>
    </div>
</section>