{% import "macros/images" as imageMacros %}
{% import 'macros' as macros %}


<section class="grid grid-cols-1 gap-12 py-16 container lg:grid-cols-[3fr_4fr] lg:gap-16 lg:py-20 xl:gap-24 xl:py-24">
  <article data-aos="fade-right" class="aos-init aos-animate">
        {% if entry.featureImage|default %}
            <div class="relative mb-12 overflow-hidden pb-2/5">
                {{ imageMacros.imagerSrcset(
                    entry.featureImage[0],
                    'card',
                    { classes: "aspect-video w-full object-cover object-center lg:aspect-[5/6] childFull", isBackground: false })
                }}
            </div>
        {% endif %}
  </article>
  <article data-aos="fade-left" class="flex flex-col items-stretch aos-init aos-animate">
    <h1 class="heading-0 text-blue">{{entry.homeFeatureHeading}}</h1>
    <div class="mt-6 copy-lg xl:mt-10"> {{entry.homeFeatureText}}</div>
    <div class="mt-8 space-y-6 xl:mt-12 xl:space-y-8">
      <!-- Repeat -->
      {% for item in entry.homeFeatureList.all() %}
        <div class="flex items-center gap-8 xl:gap-10">
            <!-- Check -->
            <div class="grid w-12 h-12 rounded-full shrink-0 place-items-center bg-imperial xl:h-16 xl:w-16">
                  {{ macros.icon("outline/check","text-white type-2xl border border-white rounded-full p-[2px]") }}
            </div>
            <!-- Content -->
            <div class="">
            <h5 class="heading-4"> {{item.heading}} </h5>
            <p class="mt-4 copy">{{item.text}} </p>
            </div>
        </div>
      {% endfor %}
    </div>
  </article>
</section>