---
brands:
---

{{#partial "page"}}

{{!--
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
--}}
<div class="page-header_container banner-header">
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
<h1 class="page-heading">{{lang 'brand.label'}}</h1>
</div>
{{{region name="brands_below_header"}}}
<div class="container">
<div class="page">
<main class="page-content">

    <ul class="brandGrid">
        {{#each brands}}
            <li class="brand">
                <article class="card {{#if alternate}}card--alternate{{/if}}">
                    <figure class="card-figure">
                        <a class="card-figure__link" aria-label="{{name}}" href="{{url}}">
                            <div class="card-img-container">
                                {{> components/common/responsive-img
                                    image=image
                                    class="card-image"
                                    fallback_size=../theme_settings.brand_size
                                    lazyload=../theme_settings.lazyload_mode
                                    default_image=../theme_settings.default_image_brand
                                }}
                            </div>
                        </a>
                    </figure>
                    <div class="card-body">
                        <h3 class="card-title">
                            <a href="{{url}}">{{name}}</a>
                        </h3>
                    </div>
                </article>
            </li>
        {{/each}}
    </ul>
    {{> components/common/paginator pagination.brands}}
    {{{region name="brands_below_content"}}}
</main>
</div>
</div>
{{/partial}}
{{> layout/base}}