---
headline_classes: "title-2 m--title-3 mb-5 ta-center mt-0"
description_classes: "body-3 ta-center mt-0 mb-8 m--px-1-col"
---
{{#
/**
 * @name block/two-col-checklist
 * @description A partial for 2 column checklists
 * @todo Document property vars
 */
#}}
<section class="px-5 my-10 m--my-12">
  <div class="mw-grid mx-auto">
    <h2 class="{{ headline_classes }}">{{ list_section_headline }}</h2>
    <p class="{{ description_classes }}">{{ list_section_description }}</p>
    <div class="lead-in-1 ta-center mb-6">{{ list_title }}</div>
    <div class="m--px-7 l--px-0 s--grid s--g-cols">
      <ul class="list m-0 p-0 s--flex s--flex-wrap s--g-col-12 m--g-col-8 m--g-start-2 mx-auto">
        {{ list }}
          <li class="fs-5 lh-4 slate mb-4 flex ai-flex-start s--w-50 s--px-4">
            <i class="fill-mint-100 mr-4 flex-shrink-0" aria-hidden="true">{{ theme:output src='images/check.svg' }}</i>
            {{ value }}
          </li>
        {{ /list }}
      </ul>
    </div>
  </div>
</section>