<div class="w-full relative z-3 max-w-6xl
    {{ !$content->full_width && !$content_element->pivot?->randomize ? 'grid md:grid-cols-3 print:grid' : 'pb-8' }}
    {{ $content->full_width ? ($content->style ? 'text-style-'.$content->style : 'text-block-full-width') : ($content->photos->count() && $content->style ? 'overflow-hidden md:rounded-lg shadow text-style-'.$content->style : '') }} print:shadow-none
    {{ $content_element->pivot?->randomize ? 'md:contents' : '' }}
    avoid-page-break">

    @if ($content->side_text && !$content->full_width)
        <div class="col-start-1 row-start-2 md:row-start-1 relaive z-4 pt-4 px-4 flex flex-col items-center">
            <div class="inline-flex flex-col shadow-lg bg-highlight rounded-lg p-4">{!! $content->side_text !!}</div>
        </div>
    @endif

    <div class="justify-center flex items-center md:col-span-2 relative
        {{ !$content_element->pivot?->randomize ? 'md:col-start-2 col-start-1 row-start-1' : 'h-full z-3 randomize-border' }}
        {{ !$content->photos->count() && $content->style ? 'text-style-'.$content->style : '' }} 
        print:block">

        <div class="w-full">
            <div class="{{ $content->full_width ? 'px-2 md:px-12' : 'text-block' }} relative z-4 {{ $content->style || $content->full_width ? 'p-8' : 'px-8 md:px-12' }}">

                @if ($content->header)
                    <h{{ $header ? '1' : '2'}}>{{ $content->header }}</h{{ $header ? '1': '2' }}>
                @endif

                <div class="body content-text {{ $content->full_width ? 'md:columns-2' : '' }}">
                    {!! $content->body !!}
                </div>

                @if (!$dash && $content->body)
                    <img src="/images/dash.svg" class="text-block-dash fill-current" alt="text closing dash" />
                    @php 
                        $dash = false;
                    @endphp
                @endif
            </div>
        </div>

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

    </div>

    @if (!$content->full_width)
        <div class="relative {{ !$content_element->pivot?->randomize ? 'col-start-1 row-start-2 md:row-start-1' : 'hidden' }}
            {{ $content->photos->count() ? 'pb-50p z-3 my-4 md:m-0 md:pb-0' : ($content->title && $content->subtitle ? 'pt-4 pb-33p z-3 md:m-0 md:pb-0' : '') }} 
            print:block">

            @if ($content->title || $content->subtitle)
                <div class="md:absolute w-full h-full z-3 mb-8">
                    @include ('content-elements.titles', ['number' => $content->title, 'name' => $content->subtitle, 'photo' => $content->photos()->first(), 'link' => null ])
                </div>
            @endif

            @if ($content->photos->count())
                <div class="absolute w-full h-full z-1 max-h-[500px] {{ $content->photos->first()->hide_print ? 'print:hidden' : '' }}">
                    @include ('content-elements.photo', ['photo' => $content->photos->first(), 'max_size' => 384, 'title' => $content->title, 'subtitle' => $content->subtitle])
                </div>
            @endif

        </div>
    @endif

</div>
