description = "Cards 4 Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addCss('assets/vendor/swipebox/css/swipebox.min.css');
    $this->addJs('assets/vendor/swipebox/js/jquery.swipebox.min.js');
}
?>
==
<div {% if data.section_cards4_id %}id="{{ data.section_cards4_id }}"{% endif %} class="cards4 py-24 {{ data.section_cards4_bg }}">
    <div class="{{ data.section_cards4_container }}">
        <!-- Row  -->
        {% if data.section_cards4_header or data.section_cards4_subheader %}
            <div class="row mb-10 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="pt-5 pb-4">{{ data.section_cards4_header }}</h2>
                    <h6 class="text-body line-height-normal">{{ data.section_cards4_subheader }}</h6>
                </div>
            </div>
        {% endif %}
        <!-- Row  -->
        <div class="row">
            {% set aos = ['fade-right', 'fade-down', 'fade-left', 'fade-right', 'fade-up', 'fade-left'] %}
            {% for fields in data.section_cards4 %}
            <!-- Column -->
            {% set gap_1 = data.section_cards4_gap %}
            {% set gap_2 = gap_1 * 2 %}
            <div class="{{ data.section_cards4_column }} px-{{ gap_1 }} mb-{{ gap_2 }}" {% if data.section_cards4_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="card h-100 border-0 rounded-{{ data.section_cards4_radius }} {{ data.section_cards4_shadow }} {{ fields.section_cards4_type == 'color' ? fields.section_cards4_color }}">
                    {% if fields.section_cards4_type != 'color' %}
                    <div class="overflow-hidden position-relative {{ data.section_cards4_overlay ? 'rounded-' : 'rounded-top-' }}{{ data.section_cards4_radius }}">
                        <div class="cards-overlay position-absolute pos-0 bg-black-50 opacity-0 z-10 transition-40 overflow-hidden w-100 h-100">
                            <div class="h-100 d-flex justify-content-center align-items-center">
                                <a class="d-flex justify-content-center align-items-center rounded-circle w-10r h-10r p-0 btn btn-outline-light {{ data.section_cards4_lightbox ? 'swipebox' }}" caption="<b class='text-white display-11'>{{ fields.section_cards4_title }}</b><br><em class='text-light'>{{ fields.section_cards4_desc }}</em>" href="
                                    {% if fields.section_cards4_type == 'image' %}
                                    {{ fields.section_cards4_image|media }}
                                    {% else %}
                                    {{ fields.section_cards4_video }}
                                    {% endif %}
                                ">
                                {% if fields.section_cards4_type == 'image' %}<i class="far fa-image"></i>{% else %}<i class="fas fa-video"></i>{% endif %}
                                </a>
                                {% if fields.section_cards4_link is not empty %}
                                <a class="d-flex justify-content-center align-items-center rounded-circle w-10r h-10r p-0 btn btn-outline-light ml-4" href="{{ fields.section_cards4_clink ? fields.section_cards4_clink : (fields.section_cards4_plink | staticPage) }}">
                                    <i class="fas fa-link"></i>
                                </a>
                                {% endif %}
                            </div>
                        </div>
                        {% if data.section_cards4_overlay %}<div class="position-absolute pos-0 bg-black-50 overflow-hidden w-100 h-100"></div>{% endif %}
                        <img class="card-img-top rounded-top-{{ data.section_cards4_radius }}" alt="{{ fields.section_cards4_title }}" src="{{ fields.section_cards4_image|media|resize(550, (data.section_cards4_height), { mode: 'crop' }) }}">
                    </div>
                    {% endif %}
                    <div class="p-7 {% if fields.section_cards4_type != 'color' and data.section_cards4_overlay %}position-absolute pos-x-0 pos-b-0 overflow-hidden w-100{% endif %} {{ fields.section_cards4_align }} {% if (fields.section_cards4_type != 'color' and data.section_cards4_overlay) or (fields.section_cards4_type == 'color' and fields.section_cards4_color != 'bg-white') %}text-white{% endif %}">
                        {% if fields.section_cards4_category or fields.section_cards4_icon %}
                        <div class="d-flex mb-2 display-13">
                            {% for tags in fields.section_cards4_category %}
                            <span class="text-uppercase {% if (fields.section_cards4_type != 'color' and data.section_cards4_overlay) or (fields.section_cards4_type == 'color' and fields.section_cards4_color != 'bg-white') %}text-white{% else %}text-default{% endif %}"> {{ tags }}{{ not loop.last ? ',&nbsp;' }}</span>
                            {% endfor %}
                            {% if fields.section_cards4_icon %}
                            <span class="ml-auto {% if (fields.section_cards4_type != 'color' and data.section_cards4_overlay) or (fields.section_cards4_type == 'color' and fields.section_cards4_color != 'bg-white') %}text-white{% else %}text-default{% endif %}"><i class="{{ fields.section_cards4_icon }}"></i></span>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% if fields.section_cards4_date or fields.section_cards4_author %}
                        <div class="d-flex display-13">
                            <span>{{ fields.section_cards4_date|date('M d, Y') }}</span>
                            <span class="ml-auto">{{ fields.section_cards4_author }}</span>
                        </div>
                        {% endif %}
                        <h5 class="font-weight-medium mt-5 {% if (fields.section_cards4_type != 'color' and data.section_cards4_overlay) or (fields.section_cards4_type == 'color' and fields.section_cards4_color != 'bg-white') %}text-white{% endif %}">
                            {% if fields.section_cards4_link is empty %}
                            {{ fields.section_cards4_title }}
                            {% else %}
                            <a href="{{ fields.section_cards4_clink ? fields.section_cards4_clink : (fields.section_cards4_plink | staticPage) }}" class="{% if (fields.section_cards4_type != 'color' and data.section_cards4_overlay) or (fields.section_cards4_type == 'color' and fields.section_cards4_color != 'bg-white') %}text-white{% else %}text-link{% endif %}">{{ fields.section_cards4_title }}<i class="fa fa-arrow-right ml-3 display-13"></i></a>
                            {% endif %}
                        </h5>
                        {% if fields.section_cards4_desc %}<p class="mt-5 mb-5">{{ fields.section_cards4_desc }}</p>{% endif %}
                        
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>

{% if data.section_cards4_lightbox %}
{% put scripts %}
<script>
;( function( $ ) {
    $( '.swipebox' ).swipebox( {
		hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
		removeBarsOnMobile : true, // false will show top bar on mobile devices
		hideBarsDelay : 5000, // delay before hiding bars on desktop
		videoMaxWidth : 1600 // videos max width
    } );
} )( jQuery );
</script>
{% endput %}
{% endif %}