<div class="flex flex-col md:flex-row print:grid print:grid-cols-2 justify-center relative z-2 flex-col-reverse 
    {{ $content->flip ? 'md:flex-row-reverse' : '' }} 
    {{ $content_element->pivot?->randomize ? 'md:col-span-3 md:h-full' : '' }}
    avoid-page-break md:rounded-lg overflow-hidden w-full max-w-6xl">

    <div class="relative flex-1 quote-container md:w-1/2 print:w-auto shadow-inner print:shadow-none">

        
        <div class="p-8 md:px-16 quote-text relative">

            <div class="relative">
                <img class="-mx-12 -my-10 absolute top-0 h-16 opacity-10" src="/images/quote-start.png" alt="Open quote image" />
                <img class="-mx-12 -my-8 absolute right-0 bottom-0 h-16 opacity-10" src="/images/quote-end.png" alt="Close quote image" />
                <div class="relative z-3 italic leading-relaxed mb-4 md:mt-4 body">
                    {!! $content->body !!}
                </div>
            </div>

            <img src="/images/dash.svg" class="quote-dash fill-current" alt="closing quote dash" />

            <div class="flex flex-col w-full md:items-end print:block">
                <div class="">
                    {{ $content->author_name }}<br/>
                    {{ $content->author_details }}
                </div>
            </div>
        </div>

        @if ($content->number)
            <div class="content-number top-0 right-0">{{ $content->number }}</div>
        @endif

    </div>

    @if ($content->photos->count())
        <div class="flex-1 flex relative w-full md:w-auto pb-75p md:pb-0 print:block">

            <div class="photo-border"></div>
            @include ('content-elements.photo', ['photo' => $content->photos->first(), 'max_size' => 576])

        </div>
    @endif

</div>
