<div class="w-full relative avoid-page-break 
    {{ $content->layout === 'huge' && $sort_order === 1 ? 'md:-mt-14' : '' }}
    {{ $content->layout !== 'huge' ? 'max-w-6xl' : '' }} 
    {{ $content->layout !== 'full' && $content->layout !== 'huge' ? 'md:grid print:grid print:grid-cols-2' : '' }}
    {{ $content->layout === 'left' || $content->layout === 'right' && ($content->header || strip_tags($content->body)) ? 'grid-cols-3' : '' }}
    {{ $content->layout === 'split-left' || $content->layout === 'split-right' && ($content->header || strip_tags($content->body)) ? 'grid-cols-2' : '' }}
    @if ($content_element->pivot?->randomize)
        h-full randomize-border
        @if ($content->layout === 'full' || $content->layout === 'huge')
            col-span-2
            {{ $content->show_text && ($content->header || strip_tags($content->body)) ? 'row-span-2 md:grid grid-rows-2' : '' }}
        @else
            {{ $content->show_text && ($content->header || strip_tags($content->body)) ? 'col-span-3' : 'col-span-2' }}
        @endif
    @endif
">

    <div class="relative z-4 flex justify-center items-center relative shadow print:shadow-none
        {{ $content->layout !== 'full' && $content->layout !== 'huge' && !$content->fill && !$content_element->pivot?->randomize ? 'md:-mx-2' : '' }}
        {{ $content->layout === 'left' || $content->layout === 'right' ? 'col-span-2' : '' }} 
        {{ $content_element->pivot?->randomize ? 'h-full' : '' }}
    ">
        @if ($content->photos->count())
            <div class="relative w-full transition-all duration-200 
                {{ $content->layout !== 'full' && $content->layout !== 'huge' ? 'pb-video md:pb-0 h-full' : '' }}
                @if ($content->layout === 'full')
                    {{ !$content->show_text ? 'pb-video md:pb-33p print:pb-33p' : 'pb-video md:pb-[42.5%] print:pb-[42.5%]' }}
                @endif
                {{ $content_element->pivot?->randomize ? 'h-full' : '' }}
                {{ $content->layout === 'huge' ? 'pb-video md:pb-[42.5%] print:pb-[42.5%]' : '' }}">

                @include ('content-elements.photo', ['photo' => $content->photos->sortBy('sort_order')->first(), 'max_size' => ($content->layout === 'full' ? 2304 : ($content->layout === 'full' ? 1152 : 576)) , 'layout' => $content->layout, 'sort_order' => $sort_order ])

                @if ($content->photos->count() > 1)
                    <slideshow :content='@json($content)' :sort-order="{{ $sort_order }}" :randomized="{{ $content_element->pivot?->randomize ? 'true' : 'false' }}"></slideshow>
                @endif
            </div>
        @endif

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

    </div>

    @if ($content->show_text && ($content->header || strip_tags($content->body) ))
        <div class="relative grid z-7 place-items-center
            {{ $content->layout === 'huge' && $content->photos->count() && !$content_element->pivot?->randomize ? 'md:-mt-32' : '' }}
            {{ $content->layout === 'full' && $content->photos->count() && !$content_element->pivot?->randomize ? 'md:-mt-16' : '' }}
            {{ $content->layout == 'right' || $content->layout === 'split-right' ? 'col-start-1 row-start-1' : '' }}
        ">

            <div class="p-8 md:px-12 print:shadow-none
                {{ !$content_element->pivot?->randomize ? 'text-block shadow-lg' : 'h-full flex flex-col justify-center' }}
                {{ ($content->layout === 'full' || $content->layout === 'huge') && !$content_element->pivot?->randomize ? 'max-w-2xl md:px-16' : '' }} 
                {{ $content->text_style ? 'text-style-'.$content->text_style : 'bg-highlight print:border' }}">

                @if ($content->header)
                    <h{{ $header ? '1' : '2'}} class="{{ !$content_element->pivot?->randomize ? 'flex-1' : '' }}">{{ $content->header }}</h{{ $header ? '1': '2' }}>
                @endif
                    
                <div class="body">
                    {!! $content->body !!}
                </div>

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

            </div>

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

        </div>
    @endif

</div>
