---
base_classes: "px-5"
default_classes: "pb-11 pt-1 m--pt-1 m--pb-12"
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">
    <div class="m--grid m--g-cols m--px-1-col mt-9">
          {{ 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 }} body-5 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>
          {{ /features }}
        </div>
      </div>

</section>