---
section_classes: "pb-11 pt-1 m--pt-1 m--pb-12"
heading_classes: "ta-center title-2 mt-0 mb-6 l--title-3"
description_classes: "body-3 mb-0 ta-center l--body-4 s--px-1-col"
feature_classes: "mt-9 l--mt-10"
center_content: false
3col_or_single: false
---
{{#
/**
 * @name feature-roll/three-column-left-link
 * @todo Document property vars/partial
 */
#}}
<section class="px-5 {{ section_classes }}">
  <div class="mw-grid mx-auto">
    <div class="m--flex m--jc-center m--flex-wrap">
      {{ features }}
        <div class="{{ feature_classes }} {{if 3col_or_single }} w-100 mw-32 l--w-33 mx-auto {{ else }} m--w-50 l--w-33 {{ /if }}">
          <div class="{{ if center_content }} ta-center {{ else }} flex ai-flex-start {{ /if }} {{ if 3col_or_single }} l--mr-4 {{ else }} mr-4 {{ /if }}">
              <img src="{{ card_image }}" alt="{{ card_image_alt }}" class="flex-shrink-0 {{ if !center_content }}mr-4{{ /if }}">
              <div class="l--mr-4">
                <h3 class="{{ unless locale_name == 'English' }}wb-ba{{ /unless }} fs-6 lh-6 fw-500 mt-0 mb-0">{{ card_title }}</h3>
                <p class="body-3 slate mt-2">{{ card_description }}</p>
                <a class="ocean fw-500 fs-4 lh-4 link hover-link-border hover-link-border-arrow" href="{{ inline-cta-url }}">{{ inline-cta-text }} <i class="rarr bc-ocean"></i></a>
              </div>
          </div>
        </div>
      {{ /features }}
    </div>
  </div>
</section>