{{ define "main" }}
<main>
    <div class="container-fluid py-5">
        <div class="container">
            <h2 class="text-center text-uppercase custom-text">Clients</h2>
            <div class="row justify-content-between align-items-center">
                {{ range where (where .Site.RegularPages "Type" "clients") "Params.home" true }}
                <div class="col-xl-2 col-lg-4 col-6 text-center">
                    <a href="{{ .Page.Params.link }}" target="_blank" rel="noopener noreferrer"><img class="img-fluid" src="/img/clients/{{ .Page.Params.image }}.svg" alt="{{ .Page.Params.name }}"></a>
                </div>
                {{ end }}
            </div>

            <hr />

            <h3 class="pt-3 text-xl-start text-center text-uppercase custom-text">Featured Case Studies</h3>

            <div class="row pt-3 pb-3">
                {{ range first 2 (where (where .Site.RegularPages "Type" "work") "Params.featured" "=" true) }}
                <div class="col-xl-6 col-lg-12 col-12 pb-xl-0 pb-4 d-flex flex-column work">
                    <a class="zoom-wrapper" href="{{ .Permalink }}" aria-label="{{ .Title }} case study"><img class="img-fluid w-100" src="{{ .Site.BaseURL }}/img/work/{{ .Params.image }}" alt=""></a>
                    <a class="title mt-3 mb-0" href="{{ .Permalink }}">{{ .Title }}</a>
                    <p class="mb-0">
                        {{ range $i, $e := .Params.categories -}}
                            {{- if $i -}}, {{ end -}}
                            <a class="category" href="{{ "/categories/" | absLangURL }}{{ . | urlize }}" aria-label="Work tagged as {{ $e }}">{{ $e }}</a>
                        {{- end -}}
                    </p>
                </div>
                {{ end }}
            </div>

            <div class="row justify-content-xl-end justify-content-start">
                <div class="col-xl-4 col-12 d-flex justify-content-xl-end justify-content-start">
                    <a class="see-more" href="/work">More Case Studies {{ partial "fontawesome.html" "solid/arrow-right" }}</a>
                </div>
            </div>

        </div>
    </div>
</main>
{{ end }}