{% import "macros/images" as imageMacros %}
{% import 'macros' as macros %}
<section class="flex flex-col-reverse gap-12 bg-blue py-16 container lg:grid lg:grid-cols-[4fr_3fr] lg:gap-16 lg:py-20 xl:gap-24 xl:py-24">
  <article class="flex flex-col items-stretch justify-center aos-init aos-animate" data-aos="fade-right">
    <h1 class="heading-0 text-blue-chalk"> {{entry.homeCtaHeading}} </h1>
    <div class="mt-2 copy-lg xl:mt-10 text-blue-chalk"> {{entry.homeCtaDescription }} </div>
    <div class="flex items-center gap-8 mt-12 xl:mt-16">
      <a href="{{entry.homeCta}}" class="pBtn">{{entry.homeCta.text}}</a>
    </div>
  </article>
  <article>
     {% if entry.homeCtaImage|default %}
          <div class="relative mb-12 overflow-hidden pb-2/5">
              {{ imageMacros.imagerSrcset(
                  entry.homeCtaImage[0],
                  'card',
                  { classes: "aspect-video w-full object-cover object-center lg:aspect-[5/6] childFull", isBackground: false })
              }}
          </div>
      {% endif %} 
  </article>
</section>