{{ if isset .Site.Params "visualfeature" }}
{{ if .Site.Params.visualfeature.enable }}
{{ if gt (len .Site.Data.visualfeature) 0 }}
<section class="bar background-white">
    <div class="container">
        <div class="heading text-center headingvf">
            <h2>視覺化行銷傳遞策略</h2>
        </div>
        <div class="text-center headingvf-sub">
            <h4>有價值的內容文案加上吸引人的視覺等於行銷成功的關鍵！<br>一張照片或 一段短影音就勝過千言萬字</h4>
        </div>
        {{ range $index, $element := sort .Site.Data.visualfeature "weight" }}
        {{ if eq (mod $index 3) 0 }}
        <div class="col-md-12">
            <div class="row">
        {{ end }}
                <div class="col-md-4">
                    <div class="box-simple">
                        {{ with $element.url }}
                        <a href="{{ $element.url }}">
                        {{ end }}
                            <div class="icon icon__feature">
                                <i class="{{ .icon }}"></i>
                            </div>
                        {{ with $element.url }}
                        </a>
                        {{ end }}
                        <h3>{{ $element.name | markdownify }}</h3>
                        <p>{{ $element.description | markdownify }}</p>
                    </div>
                </div>
        {{ if or (eq (mod $index 3) 2) (eq $index (sub (len $.Site.Data.features) 1 )) }}
            </div>

        </div>
        {{ end }}
        {{ end }}
    </div>
</section>
{{ end }}
{{ end }}
{{ end }}