---
checklist_section_classes: "px-5 my-10 m--my-12"
headline_classes: "title-2 m--title-3 mb-4 ta-center mt-0"
description_classes: "body-3 ta-center mt-0 mb-4 m--px-1-col"
list_title_classes: "lead-in-1 ta-center mb-9"
---
{{#
/**
 * @name block/three-col-checklist
 * @description A partial for 3 column checklists
 * @todo Document property vars
 */
#}}
<section class="{{ checklist_section_classes }}">
  <div class="mw-grid mx-auto">
    <h2 class="{{ headline_classes }}">{{ list_section_headline }}</h2>
    <p class="{{ description_classes }}">{{ list_section_description }}</p>
    <div class="{{ list_title_classes }}">{{ list_title }}</div>
    <ul class="s--grid s--g-cols s--gap-s list s-0 p-0">
      {{ list }}
      <li class="mb-2 fs-5 lh-4 slate flex ai-flex-start s--mb-0 s--g-col-6 {{ switch between='m--g-start-1|m--g-start-7' }} m--g-col-5 l--g-start-auto l--g-col-4 {{ item_custom_classes }}">
        <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>
</section>