---
base_classes: "px-5"
default_classes: "py-11 m--py-12"
default_alignment: "ta-center"
feature_roll_id: ""
---
{{#
/**
 * @name feature-roll/two-column-left
 * @todo Document property vars/partial
 */
#}}
<section class="{{ base_classes }} {{ custom_classes or default_classes }}" {{ if feature_roll_id }}id="{{ feature_roll_id }}"{{ /if }}>
  <div class="mw-grid mx-auto">
    <h2 class="{{ custom_alignment or default_alignment }} title-2 l--title-3 l--mt-9 l--mb-0 m--px-1-col m--mx--8">{{ feature_roll_title | widont }}</h2>
    {{ if feature_roll_subtitle }}
      <p class="body-3 ta-center l--body-4 l--mb-10 s--px-1-col">{{ feature_roll_subtitle }}</p>
    {{ /if }}
    <div class="m--grid m--g-cols mt-9">
      <div class="m--g-col-12 m--px-1-col">
        <div class="m--grid m--g-cols">
          {{ features }}
            <div class="flex ai-flex-start px-4 mb-6 m--px-8 m--g-col-6">
              {{ if card_image }}
                <img src="{{ card_image }}" alt="{{ card_image_alt }}" class="flex-shrink-0 mr-4">
              {{ /if }}
              <div>
                <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>
          {{ /features }}
        </div>
      </div>
    </div>
  </div>
</section>