description = "Cards 3 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_cards3_id %}id="{{ data.section_cards3_id }}"{% endif %} class="cards3 py-24 {{ data.section_cards3_bg }}">
    <div class="{{ data.section_cards3_container }}">
        <!-- Row  -->
        {% if data.section_cards3_header or data.section_cards3_subheader %}
            <div class="row mb-10 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="pt-5 pb-4">{{ data.section_cards3_header }}</h2>
                    <h6 class="text-body line-height-normal">{{ data.section_cards3_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_cards3 %}
            <!-- Column -->
            {% set gap_1 = data.section_cards3_gap %}
            {% set gap_2 = gap_1 * 2 %}
            <div class="{{ data.section_cards3_column }} px-{{ gap_1 }} mb-{{ gap_2 }}" {% if data.section_cards3_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="card h-100 border-0 rounded-{{ data.section_cards3_radius }} {{ data.section_cards3_shadow }} {{ fields.section_cards3_type == 'color' ? fields.section_cards3_color }}">
                    {% if fields.section_cards3_type != 'color' %}
                    <div class="position-relative rounded-top-{{ data.section_cards3_radius }}">
                        <div class="cards-overlay position-absolute pos-0 bg-white-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-default {{ data.section_cards3_lightbox ? 'swipebox' }}" caption="<b class='text-white display-11'>{{ fields.section_cards3_title }}</b><br><em class='text-light'>{{ fields.section_cards3_desc }}</em>" href="
                                    {% if fields.section_cards3_type == 'image' %}
                                    {{ fields.section_cards3_image|media }}
                                    {% else %}
                                    {{ fields.section_cards3_video }}
                                    {% endif %}
                                ">
                                {% if fields.section_cards3_type == 'image' %}<i class="far fa-image"></i>{% else %}<i class="fas fa-video"></i>{% endif %}
                                </a>
                                {% if fields.section_cards3_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-default ml-4" href="{{ fields.section_cards3_clink ? fields.section_cards3_clink : (fields.section_cards3_plink | staticPage) }}">
                                    <i class="fas fa-link"></i>
                                </a>
                                {% endif %}
                            </div>
                        </div>
                        <img class="card-img-top rounded-top-{{ data.section_cards3_radius }}" alt="{{ fields.section_cards3_title }}" src="{{ fields.section_cards3_image|media|resize(550, (fields.section_cards3_height), { mode: 'crop' }) }}">
                    </div>
                    {% endif %}
                    <div class="cards3-body d-flex flex-column p-7 {{ fields.section_cards3_align }} {% if fields.section_cards3_type == 'color' and fields.section_cards3_color != 'bg-white' %}text-white{% endif %}">
                        {% if fields.section_cards3_category or fields.section_cards3_icon %}
                        <div class="d-flex display-13">
                            {% for tags in fields.section_cards3_category %}
                            <span class="text-uppercase {% if fields.section_cards3_type == 'color' and fields.section_cards3_color != 'bg-white' %}text-white{% else %}text-default{% endif %}"> {{ tags }}{{ not loop.last ? ',&nbsp;' }}</span>
                            {% endfor %}
                            {% if fields.section_cards3_icon %}
                            <span class="ml-auto {% if fields.section_cards3_type == 'color' and fields.section_cards3_color != 'bg-white' %}text-white{% else %}text-default{% endif %}"><i class="display-9 {{ fields.section_cards3_icon }}"></i></span>
                            {% endif %}
                        </div>
                        {% endif %}
                        <h5 class="font-weight-medium mt-5 {% if fields.section_cards3_type == 'color' and fields.section_cards3_color != 'bg-white' %}text-white{% endif %}">
                            {% if fields.section_cards3_link is empty %}
                            {{ fields.section_cards3_title }}
                            {% else %}
                            <a href="{{ fields.section_cards3_clink ? fields.section_cards3_clink : (fields.section_cards3_plink | staticPage) }}" class="{% if fields.section_cards3_type == 'color' and fields.section_cards3_color != 'bg-white' %}text-white{% else %}text-link{% endif %}">{{ fields.section_cards3_title }}<i class="fa fa-arrow-right ml-3 display-13"></i></a>
                            {% endif %}
                        </h5>
                        {% if fields.section_cards3_desc %}<p class="mt-5 mb-5">{{ fields.section_cards3_desc }}</p>{% endif %}
                        {% if fields.section_cards3_date or fields.section_cards3_author %}
                        <div class="mt-auto d-flex display-13">
                            <span>{{ fields.section_cards3_author }}</span>
                            <span class="ml-auto">{{ fields.section_cards3_date|date('M d, Y') }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>

{% if data.section_cards3_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 %}