@props([
    'reverse' => false,
])

<div class="flex flex-col gap-8 md:flex-row md:items-center md:justify-between lg:gap-16">
    <div @class(['md:w-1/2', 'md:order-last' => $reverse])>
        <x-frontend.animation delay="{{ $reverse ? '250' : '0' }}">
            {{ $left }}
        </x-frontend.animation>
    </div>
    <div class="md:w-1/2">
        <x-frontend.animation delay="{{ $reverse ? '0' : '250' }}">
            {{ $right }}
        </x-frontend.animation>
    </div>
</div>