{% extends 'layout.html' %}
{% block content -%}
<div class="page-wrapper index-wrapper">
    <!-- ******Header****** -->
    <header class="header text-center">
        <div class="container">
            <div class="branding">
                <h1 class="logo">
                    <span aria-hidden="true" class="icon_documents_alt icon"></span>
                    <span class="text-bold">{{ product_title | raw }}</span>
                </h1>
            </div><!--//branding-->
        </div><!--//container-->
    </header><!--//header-->
        
    <section class="cards-section text-center">
        <div class="container">
            <div id="cards-wrapper" class="cards-wrapper row">
                {% for item in sections %}
                <div class="item {{ item.classes }} col-lg-4 col-6">
                    <div class="item-inner">
                        <div class="icon-holder">
                            <i class="icon fa {{ item.classes }}"></i>
                        </div><!--//icon-holder-->
                        <h3 class="title">{{ item.title | raw }}</h3>
                        <p class="intro">{{ item.content | raw }}</p>
                        <a class="link" href="{{ item.href }}"><span></span></a>
                    </div><!--//item-inner-->
                </div><!--//item-->
                {% endfor %}
            </div><!--//cards-->
                
        </div><!--//container-->
    </section><!--//cards-section-->
</div><!--//page-wrapper-->
{% endblock %}