description = "Cards 1 Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addCss('assets/vendor/owl-carousel/css/owl.carousel.min.css');
    $this->addCss('assets/vendor/owl-carousel/css/owl.theme.default.min.css');
    $this->addJs('assets/vendor/owl-carousel/js/owl.carousel.min.js');
}
?>
==
<div {% if data.section_cards1_id %}id="{{ data.section_cards1_id }}"{% endif %} class="cards1 py-24 {{ data.section_cards1_bg }}">
    <div class="{{ data.section_cards1_container }}">
        <!-- Row  -->
        {% if data.section_cards1_header or data.section_cards1_subheader %}
            <div class="row mb-10 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="pt-5 pb-4">{{ data.section_cards1_header }}</h2>
                    <h6 class="text-body line-height-normal">{{ data.section_cards1_subheader }}</h6>
                </div>
            </div>
        {% endif %}
        <!-- Row  -->
        {% set gap_1 = data.section_cards1_gap %}
        {% set gap_2 = gap_1 - 0.5 %}
        <div class="card-columns {{ data.section_cards1_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_cards1 %}
            <!-- Column -->
            <div class="card border-0 overflow-hidden rounded-{{ data.section_cards1_radius }} {{ data.section_cards1_shadow }} {{ fields.section_cards1_type == 'color' ? fields.section_cards1_color }}" style="{% if data.section_cards1_animation == 0 %}transform:translate(0);{% endif %} margin-bottom:{{ gap_2 }}rem;" {% if data.section_cards1_animation %}data-aos="{{ aos[ loop.index0 % 9 ] }}" data-aos-duration="1200"{% endif %}>
                {% if fields.section_cards1_type == 'image' %}
                {% if fields.section_cards1_images|length <= 1 %}
                {% for images in fields.section_cards1_images %}
                {% if fields.section_cards1_link is not empty %}<a href="{{ fields.section_cards1_clink ? fields.section_cards1_clink : (fields.section_cards1_plink | staticPage) }}">{% endif %}
                {% if fields.section_cards1_type != 'color' and fields.section_cards1_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_cards1_radius }}" alt="{{ fields.section_cards1_title }}" src="{{ images.section_cards1_image|media|resize(550, (fields.section_cards1_height), { mode: 'crop' }) }}">
                {% if fields.section_cards1_link is not empty %}</a>{% endif %}
                {% endfor %}
                {% else %}
                <div id="cardsCarousel-{{ data.section_cards1_id }}-{{ fields.section_cards1_title|slug }}" class="carousel slide carousel-fade" data-ride="carousel">
                    <ol class="carousel-indicators">
                        {% for images in fields.section_cards1_images %}
                        <li data-target="#cardsCarousel-{{ data.section_cards1_id }}-{{ fields.section_cards1_title|slug }}" data-slide-to="{{ loop.index0 }}" {% if loop.index0 == 0 %}class="active"{% endif %}></li>
                        {% endfor %}
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        {% for images in fields.section_cards1_images %}
                        <div class="carousel-item overflow-hidden rounded-top-{{ data.section_cards1_radius }} {{ loop.first ? 'active' }}">
                            <img src="{{ images.section_cards1_image|media|resize(550, (fields.section_cards1_height), { mode: 'crop' }) }}" class="d-block w-100" alt="{{ fields.section_cards1_title }}">
                        {% if fields.section_cards1_type != 'color' and fields.section_cards1_overlay %}<div class="position-absolute pos-0 bg-black-50 overflow-hidden w-100 h-100"></div>{% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    <a class="carousel-control-prev" href="#cardsCarousel-{{ data.section_cards1_id }}-{{ fields.section_cards1_title|slug }}" role="button" data-slide="prev">
                        <span class="fa fa-angle-left icon-prev" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#cardsCarousel-{{ data.section_cards1_id }}-{{ fields.section_cards1_title|slug }}" role="button" data-slide="next">
                        <span class="fa fa-angle-right icon-next" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                {% endif %}
                {% elseif fields.section_cards1_type == 'video' %}
                <div class="embed-responsive embed-responsive-4by3 rounded-top-{{ data.section_cards1_radius }}" style="height:{{ fields.section_cards1_height }}px;">
                    <iframe class="embed-responsive-item" width="550" height="400" src="https://www.youtube.com/embed/{{ fields.section_cards1_video }}" frameborder="0" allowfullscreen></iframe>
                </div>
                {% endif %}
                <div class="p-7 {% if fields.section_cards1_type != 'color' and fields.section_cards1_overlay %}position-absolute pos-x-0 pos-b-0 overflow-hidden z-10 w-100{% endif %} {{ fields.section_cards1_align }} {% if (fields.section_cards1_type != 'color' and fields.section_cards1_overlay) or (fields.section_cards1_type == 'color' and fields.section_cards1_color != 'bg-white') %}text-white{% endif %}">
                    {% if fields.section_cards1_date or fields.section_cards1_author %}
                    <div class="d-flex display-13">
                        <span>{{ fields.section_cards1_date|date('M d, Y') }}</span>
                        <span class="ml-auto">{{ fields.section_cards1_author }}</span>
                    </div>
                    {% endif %}
                    <h5 class="font-weight-medium mt-5 {% if (fields.section_cards1_type != 'color' and fields.section_cards1_overlay) or (fields.section_cards1_type == 'color' and fields.section_cards1_color != 'bg-white') %}text-white{% endif %}">
                        {% if fields.section_cards1_link is empty %}
                        {{ fields.section_cards1_title }}
                        {% else %}
                        <a href="{{ fields.section_cards1_clink ? fields.section_cards1_clink : (fields.section_cards1_plink | staticPage) }}" class="{% if (fields.section_cards1_type != 'color' and fields.section_cards1_overlay) or (fields.section_cards1_type == 'color' and fields.section_cards1_color != 'bg-white') %}text-white{% else %}text-link{% endif %}">{{ fields.section_cards1_title }}<i class="fa fa-arrow-right ml-3 display-13"></i></a>
                        {% endif %}
                    </h5>
                    {% if fields.section_cards1_desc %}<p class="mt-5 mb-5">{{ fields.section_cards1_desc }}</p>{% endif %}
                    {% if fields.section_cards1_category or fields.section_cards1_icon %}
                    <div class="d-flex display-13">
                        {% for tags in fields.section_cards1_category %}
                        <span class="text-uppercase {% if (fields.section_cards1_type != 'color' and fields.section_cards1_overlay) or (fields.section_cards1_type == 'color' and fields.section_cards1_color != 'bg-white') %}text-white{% else %}text-default{% endif %}"> {{ tags }}{{ not loop.last ? ',&nbsp;' }}</span>
                        {% endfor %}
                        {% if fields.section_cards1_icon %}
                        <span class="ml-auto {% if (fields.section_cards1_type != 'color' and fields.section_cards1_overlay) or (fields.section_cards1_type == 'color' and fields.section_cards1_color != 'bg-white') %}text-white{% else %}text-default{% endif %}"><i class="display-10 {{ fields.section_cards1_icon }}"></i></span>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
            <!-- Column -->
            {% endfor %}
        </div>
    </div>
</div>