{{#
/**
 * @name top-level/secondary-feature-roll
 * @deprecated This partial has been deprecated. Please use {@link feature-roll/three-column-left} instead.
 * @todo Document property vars/partial
 */
#}}
<section class="px-5 pt-10 pb-10 l--pt-11">
  <div class="mw-grid mx-auto">
    <h2 class="title-2 ta-center l--title-3 l--mt-9 l--mb-0 {{ headline-classes }}">{{ secondary_feature_roll_title }}</h2>
    <p class="body-3 ta-center mb-9 l--body-4 l--mb-10 {{ subtitle-classes }}">{{ secondary_feature_roll_copy }}</p>
    <div class="grid g-cols gap-m">
      {{ secondary_features }}
        <div class="flex ai-flex-start px-4 g-col-12 s--mb-6 s--px-0 s--g-col-6 m--g-col-4">
          <img src="{{ secondary_feature_image }}" alt="" class="flex-shrink-0 mr-4">
          <div>
            {{ if feature_page_url }}
            <a href="{{ feature_page_url }}" class="fs-6 lh-5 title fw-700 mt-0 mb-0 link ocean hover-rarr hover-td-underline {{ unless locale_name == "English" }}wb-ba{{ /unless }}">{{ secondary_feature_label }} <i class="rarr bc-ocean"></i></a>
            {{ else }}
            <h3 class="fs-6 lh-6 fw-700 mt-0 mb-0 {{ unless locale_name == "English" }}wb-ba{{ /unless }}">{{ secondary_feature_label }}</h3>
            {{ /if }}
            <p class="body-3 slate mt-2">{{ secondary_feature_description }}</p>
          </div>
        </div>
      {{ /secondary_features }}
    </div>
  </div>
</section>