{% extends 'base_app.html.twig' %}

{% block title %}
{% trans %}category{% endtrans %} | {% trans %}app_name{% endtrans %}
{% endblock %}
{% block body_class %}category-page{% endblock %}
{% block body %}
<div id="page-content">        
    <!--Body Container-->
    <!--Breadcrumbs-->
    <div class="breadcrumbs-wrapper">
        <div class="container">
            <div class="breadcrumbs"><a href="index.html" title="Back to the home page">Home</a> <span aria-hidden="true">|</span> <span>Category 4Columns</span></div>
        </div>
    </div>
    <!--End Breadcrumbs-->
    <div class="container">
        <div class="page-title"><h1>Category 4 Columns</h1></div>
        <!--Category Simple Grid-->
        <div class="collection-banners style3">
            <div class="row">
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <div class="img">
                            <a href="#;" class="collection-grid-item__link">
                                <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                                <span class="details">
                                    <span class="inner">
                                        <span class="collection-grid-item__title">New Arrivals</span>
                                        <span class="counts">20 products</span>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <a href="#;" class="collection-grid-item__link">
                            <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                            <span class="details">
                                <span class="inner">
                                    <span class="collection-grid-item__title">Belt</span>
                                    <span class="counts">29 products</span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <a href="#;" class="collection-grid-item__link">
                            <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                            <span class="details">
                                <span class="inner">
                                    <span class="collection-grid-item__title">Bags</span>
                                    <span class="counts">10 products</span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <a href="#;" class="collection-grid-item__link">
                            <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                            <span class="details">
                                <span class="inner">
                                    <span class="collection-grid-item__title">Accessories</span>
                                    <span class="counts">50 products</span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <a href="#;" class="collection-grid-item__link">
                            <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                            <span class="details">
                                <span class="inner">
                                    <span class="collection-grid-item__title">Men Shoes</span>
                                    <span class="counts">11 products</span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <a href="#;" class="collection-grid-item__link">
                            <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                            <span class="details">
                                <span class="inner">
                                    <span class="collection-grid-item__title">Men</span>
                                    <span class="counts">18 products</span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <a href="#;" class="collection-grid-item__link">
                            <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                            <span class="details">
                                <span class="inner">
                                    <span class="collection-grid-item__title">Sungalsses</span>
                                    <span class="counts">15 products</span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <a href="#;" class="collection-grid-item__link">
                            <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                            <span class="details">
                                <span class="inner">
                                    <span class="collection-grid-item__title">Tops</span>
                                    <span class="counts">15 products</span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <a href="#;" class="collection-grid-item__link">
                            <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                            <span class="details">
                                <span class="inner">
                                    <span class="collection-grid-item__title">Hot Collection</span>
                                    <span class="counts">15 products</span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <a href="#;" class="collection-grid-item__link">
                            <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                            <span class="details">
                                <span class="inner">
                                    <span class="collection-grid-item__title">Men Denim</span>
                                    <span class="counts">10 products</span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <a href="#;" class="collection-grid-item__link">
                            <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                            <span class="details">
                                <span class="inner">
                                    <span class="collection-grid-item__title">Mini Dress</span>
                                    <span class="counts">9 products</span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 col-lg-3 collection-page-item">
                    <div class="collection-grid-item">
                        <a href="#;" class="collection-grid-item__link">
                            <img class="blur-up lazyload" data-src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" src="{{ asset('front/assets/images/collection-banner/268x342.jpg') }}" alt="" title=" " />
                            <span class="details">
                                <span class="inner">
                                    <span class="collection-grid-item__title">Sandals</span>
                                    <span class="counts">9 products</span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                
            </div>
        </div>
        <!--End Category Simple Grid-->
    
    </div><!--End Body Container-->
    
</div>
{% endblock %}