---
section_classes: "py-11 m--py-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"
eyebrow_classes: "lead-in-1 mt-9 mb-0 tt-upper ta-center slate-120 body"
center_content: false
3col_or_single: false
---
{{#
/**
 * @name feature-roll/three-column-left
 * @todo Document property vars/partial
 */
#}}
<section class="px-5 {{ section_classes }}">
  <div class="mw-grid mx-auto">
    <h2 class="{{ custom_heading_classes or heading_classes }}">{{ feature_roll_title | widont }}</h2>
    {{ if feature_roll_subtitle }}
      <p class="{{ description_classes }}">{{ feature_roll_subtitle | widont }}</p>
    {{ /if }}
    {{ if features_eyebrow }}
      <p class="{{ eyebrow_classes }}">{{ features_eyebrow }}</p>
    {{ /if }}
    <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-700 mt-0 mb-0">{{ card_title }}</h3>
                <p class="body-3 slate mt-2">{{ card_description }}</p>
              </div>
          </div>
        </div>
      {{ /features }}
    </div>
  </div>
</section>