@props([
    'image' => true,
    'flip' => null
])

@php($classes = ('grid gap-12 py-16 md:py-24 items-center ' . ($flip?'md:grid-cols-[1fr,1.3fr]':'md:grid-cols-[1.3fr,1fr]')))
<div {{ $attributes->class($classes) }}>
    @if($image)
        <div class="{{$flip?'md:order-2':''}} min-h-[320px] h-full bg-grey-200 bg-cover bg-center rounded-sm" :style="`background-image: url(${block.thumbnail_img})`"></div>
    @endif
    <div class="{{$flip?'md:order-1':''}} space-y-4 text-center md:text-left">
        {{ $slot }}
    </div>
</div>


{{--
EXAMPLE:

<div class="bg-purple">
    <div class="container-1">
        <x-banner :flip="true" :image="fake()->imageUrl" class="text-white">
            <h2 class="h2 -mt-2">{{ fake()->sentence }}</h2>
            <p>{{ fake()->paragraph }} {{ fake()->paragraph }}</p>
            <a href="#" class="btn-bright-pink">This is a link</a>
        </x-banner>
    </div>
</div>

--}}