<div class="w-full relative avoid-page-break 
    {{ $content->layout === 'huge' && $sort_order === 1 ? 'md:-mt-[85px]' : '' }}
    {{ $content->layout !== 'huge' ? 'max-w-6xl' : '' }} 
    {{ $content->layout !== 'full' && $content->layout !== 'huge' ? 'md:grid' : '' }}
    {{ $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' : '' }} 
    ">
        @if ($content->url)
            <div class="relative w-full bg-color
                {{ $content->layout === 'full' ? 'pb-video md:pb-[42.5%] print:pb-[42.5%]' : '' }} 
                {{ $content->layout === 'huge' ? 'pb-100p md:pb-50p print:pb-50p' : '' }} 
                {{ $content->fill || $content_element->pivot?->randomize ? 'h-full' : '' }}
                {{ $content->layout !== 'full' && $content->layout !== 'huge' ? 'pb-video' : '' }}
            ">
                <media-loader class="z-0"></media-loader>
                <video-player :content='@json($content)'></video-player>
            </div>
        @endif

        @if ($content->number)
            <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 place-items-center z-7 pointer-events-none 
            {{ $content->layout === 'full' && $content->url && !$content_element->pivot?->randomize ? 'md:-mt-16' : '' }}
            {{ $content->layout === 'huge' && $content->url && !$content_element->pivot?->randomize? 'md:-mt-32' : '' }}
            {{ ($content->layout == 'right' || $content->layout === 'split-right') && !$content_element->pivot?->randomize ? 'col-start-1 row-start-1' : '' }}
            {{ $content_element->pivot?->randomize ? 'h-full '.($content->text_style ? 'text-style-'.$content->text_style : 'bg-highlight') : '' }}
        ">

            <div class="p-8 md:px-12 print:shadow-none print:border print:border-color 
                {{ !$content_element->pivot?->randomize ? 'text-block shadow-lg pointer-events-auto' : '' }}
                {{ ($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' }}">

                @if ($content->header)
                    <h{{ $header ? '1' : '2'}} class="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>

        </div>
    @endif

</div>
