{% import "./macros_typography.html.twig" as macrosTypography %}{% import "./macros_button.html.twig" as macrosButton %}<section class="pt-10 pb-28 md:pb-44 text-white" section-shade="dark"> <div class="container"> <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-8 sm:gap-12 xl:pr-32"> <div class="relative sm:w-5/12 shrink-0"> <div class="relative w-full h-full overflow-hidden z-10"> {% if content.Image|length > 0 %} <img class="w-full" src="{{ content.Image.url }}" alt="Let's appraise your property" zoom-out zoom-out-trigger="scroll" /> {% endif %} </div> <svg class="hidden sm:block absolute top-1/2 -translate-y-1/2 translate-x-1/2 aspect-square text-white/5 pointer-events-none"> <use xlink:href="#circle"></use> </svg> </div> <div class="relative flex flex-col gap-14 max-w-[568px]"> <svg class="block sm:hidden absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-[550px] aspect-square text-white/5 pointer-events-none"> <use xlink:href="#circle"></use> </svg> <h2 class="h2" split-direction="top" split-trigger="scroll"> {{content.title }} </h2> <p class="text-sm xs:text-base sm:text-sm lg:text-base" fade fade-trigger="scroll"> {{content.description|raw }} </p> {{ macrosButton.arrowLink({ wrappClass: 'text-white', text: 'contact an expert', href: '/contact', trigger: 'scroll' }) }} </div> </div> </div></section>