@props([
    'head' => false,
    'withImage' => true,
    'centerHead' => false,
    'image' => '',
    'text',
    'text2',
    'extra' => '',
])

@if ($head)
<h2 class="m-0 text-xl font-semibold leading-tight border-0 border-gray-300 lg:text-3xl md:text-2xl pb-4 {{ $centerHead ? 'text-center' : '' }}">
{{ $head }}
</h2>
@endif
<div
    {{ $attributes->merge([
        'class' => 'pb-8 lg:pb-16 flex flex-col items-center content-center px-8 mx-auto leading-6 text-black border-0 border-gray-300 border-solid md:flex-row max-w-7xl lg:px-16'
    ]) }} >
    @if ($withImage)
    <div class="relative w-full max-w-md px-4 mt-5 mb-4 -ml-5 bg-no-repeat bg-contain border-solid md:ml-0 md:mt-0 md:max-w-none lg:mb-0 md:w-1/2 xl:pl-10">
        {{ $image }}
    </div>
    <div class="order-first w-full text-black border-solid md:w-1/2 md:pl-10 md:order-none">
        {{ $text }}
    </div>
    @else
    <div class="w-full text-black border-solid md:w-1/2 md:pl-10">
        {{ $text }}
    </div>
    <div class="w-full text-black border-solid md:w-1/2 md:pl-10">
        {{ $text2 }}
    </div>
    @endif

</div>

{{ $extra }}