description = "Cards 2 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_cards2_id %}id="{{ data.section_cards2_id }}"{% endif %} class="cards2 py-24 {{ data.section_cards2_bg }}">
    <div class="{{ data.section_cards2_container }}">
        <!-- Row  -->
        {% if data.section_cards2_header or data.section_cards2_subheader %}
            <div class="row mb-10 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="pt-5 pb-4">{{ data.section_cards2_header }}</h2>
                    <h6 class="text-body line-height-normal">{{ data.section_cards2_subheader }}</h6>
                </div>
            </div>
        {% endif %}
        <!-- Row  -->
        {% set gap_1 = data.section_cards2_gap %}
        {% set gap_2 = gap_1 %}
        <div class="card-columns {{ data.section_cards2_column }} mt-10" style="-webkit-column-gap:{{ gap_1 }}rem; -moz-column-gap:{{ gap_1 }}rem; column-gap:{{ gap_1 }}rem;">
            {% set aos = ['fade-right', 'fade-right', 'fade-right', 'fade-down', 'fade-up', 'fade-down', 'fade-left', 'fade-left', 'fade-left' ] %}
            {% for fields in data.section_cards2 %}
            <!-- Column -->
            <div class="card border-0 rounded-{{ data.section_cards2_radius }} {{ fields.section_cards2_type == 'color' ? fields.section_cards2_color }}" style="margin-bottom:{{ gap_2 }}rem;" {% if data.section_cards2_animation %}data-aos="{{ aos[ loop.index0 % 9 ] }}" data-aos-duration="1200"{% endif %}
            >
                <div class="rounded-{{ data.section_cards2_radius }} {{ data.section_cards2_shadow }}">
                    {% if fields.section_cards2_type != 'color' %}
                    <div class="overflow-hidden position-relative {{ fields.section_cards2_overlay ? 'rounded-' : 'rounded-top-' }}{{ data.section_cards2_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_cards2_lightbox ? 'swipebox' }}" caption="<b class='text-white display-11'>{{ fields.section_cards2_title }}</b><br><em class='text-light'>{{ fields.section_cards2_desc }}</em>" href="
                                    {% if fields.section_cards2_type == 'image' %}
                                    {{ fields.section_cards2_image|media }}
                                    {% else %}
                                    {{ fields.section_cards2_video }}
                                    {% endif %}
                                ">
                                {% if fields.section_cards2_type == 'image' %}<i class="far fa-image"></i>{% else %}<i class="fas fa-video"></i>{% endif %}
                                </a>
                                {% if fields.section_cards2_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_cards2_clink ? fields.section_cards2_clink : (fields.section_cards2_plink | staticPage) }}">
                                    <i class="fas fa-link"></i>
                                </a>
                                {% endif %}
                            </div>
                        </div>
                        {% if fields.section_cards2_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_cards2_radius }}" alt="{{ fields.section_cards2_title }}" src="{{ fields.section_cards2_image|media|resize(550, (fields.section_cards2_height), { mode: 'crop' }) }}">
                    </div>
                    {% endif %}
                    <div class="p-7 {% if fields.section_cards2_type != 'color' and fields.section_cards2_overlay %}position-absolute pos-x-0 pos-b-0 overflow-hidden w-100{% endif %} {{ fields.section_cards2_align }} {% if (fields.section_cards2_type != 'color' and fields.section_cards2_overlay) or (fields.section_cards2_type == 'color' and fields.section_cards2_color != 'bg-white') %}text-white{% endif %}">
                        {% if fields.section_cards2_date or fields.section_cards2_author %}
                        <div class="d-flex display-13">
                            <span>{{ fields.section_cards2_date|date('M d, Y') }}</span>
                            <span class="ml-auto">{{ fields.section_cards2_author }}</span>
                        </div>
                        {% endif %}
                        <h5 class="font-weight-medium mt-5 {% if (fields.section_cards2_type != 'color' and fields.section_cards2_overlay) or (fields.section_cards2_type == 'color' and fields.section_cards2_color != 'bg-white') %}text-white{% endif %}">
                            {% if fields.section_cards2_link is empty %}
                            {{ fields.section_cards2_title }}
                            {% else %}
                            <a href="{{ fields.section_cards2_clink ? fields.section_cards2_clink : (fields.section_cards2_plink | staticPage) }}" class="{% if (fields.section_cards2_type != 'color' and fields.section_cards2_overlay) or (fields.section_cards2_type == 'color' and fields.section_cards2_color != 'bg-white') %}text-white{% else %}text-link{% endif %}">{{ fields.section_cards2_title }}<i class="fa fa-arrow-right ml-3 display-13"></i></a>
                            {% endif %}
                        </h5>
                        {% if fields.section_cards2_desc %}<p class="mt-5 mb-5">{{ fields.section_cards2_desc }}</p>{% endif %}
                        {% if fields.section_cards2_category or fields.section_cards2_icon %}
                        <div class="d-flex display-13">
                            {% for tags in fields.section_cards2_category %}
                            <span class="text-uppercase {% if (fields.section_cards2_type != 'color' and fields.section_cards2_overlay) or (fields.section_cards2_type == 'color' and fields.section_cards2_color != 'bg-white') %}text-white{% else %}text-default{% endif %}"> {{ tags }}{{ not loop.last ? ',&nbsp;' }}</span>
                            {% endfor %}
                            {% if fields.section_cards2_icon %}
                            <span class="ml-auto {% if (fields.section_cards2_type != 'color' and fields.section_cards2_overlay) or (fields.section_cards2_type == 'color' and fields.section_cards2_color != 'bg-white') %}text-white{% else %}text-default{% endif %}"><i class="display-10 {{ fields.section_cards2_icon }}"></i></span>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>

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