        <div class="relative flex justify-center print:grid print:place-items-center
                ml-1 md:ml-0 print:ml-0

                @if ($content->columns >= 4 && $content->photos->count() > 4)
                    col-span-2
                @endif

                @if ($content_element->pivot->randomize)
                    md:h-full z-2 md:col-span-{{ $content->text_span }} randomize-border
                @else
                    md:col-span-{{ $content->text_span }} print:col-span-{{ $content->text_span }}

                    @if (ceil($content->text_order / $content->columns) == 7)
                        row-start-7 md:row-start-7 print:row-start-7
                    @elseif (ceil($content->text_order / $content->columns) == 6)
                        row-start-6 md:row-start-6 print:row-start-6
                    @elseif (ceil($content->text_order / $content->columns) == 5)
                        row-start-5 md:row-start-5 print:row-start-5
                    @elseif (ceil($content->text_order / $content->columns) == 4)
                        row-start-4 md:row-start-4 print:row-start-4
                    @elseif (ceil($content->text_order / $content->columns) == 3)
                        row-start-3 md:row-start-3 print:row-start-3
                    @elseif (ceil($content->text_order / $content->columns) == 2)
                        row-start-2 md:row-start-2 print:row-start-2
                    @elseif (ceil($content->text_order / $content->columns) == 1)
                        @if ($content->text_first)
                            row-start-1
                        @else 
                            row-start-2
                        @endif
                        md:row-start-1 print:row-start-1
                    @endif

                    col-start-1

                    @if ($content->text_order % $content->columns === 0)
                        @if ($content->columns === 7)
                            md:col-start-7 print:col-start-7
                        @elseif ($content->columns === 6)
                            md:col-start-6 print:col-start-6
                        @elseif ($content->columns === 5)
                            md:col-start-5 print:col-start-5
                        @elseif ($content->columns === 4)
                            md:col-start-4 print:col-start-4
                        @elseif ($content->columns === 3)
                            md:col-start-3 print:col-start-3
                        @elseif ($content->columns === 2)
                            md:col-start-2 print:col-start-2
                        @elseif ($content->columns === 1)
                            md:col-start-1 print:col-start-1
                        @endif
                    @else
                        md:col-start-{{ $content->text_order % $content->columns }} print:col-start-{{ $content->text_order % $content->columns }}
                    @endif 
                @endif 

                {{ $content->text_style ? 'text-style-'.$content->text_style : '' }}
            " 
            key="text"
        >

            @if ($content->photos?->count() && $content->text_style && !$content_element->pivot->randomize)
                <div class="hidden md:block absolute z-1 w-full h-full right-[-1rem] overflow-hidden">
                    <div class="absolute w-32 z-1 top-[-25%] h-[150%] right-0 rounded-[100%] {{ $content->text_style ? 'text-style-'.$content->text_style : '' }} text-curved-bg"></div>
                </div>
            @endif

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

            <div class="body text-block flex flex-col justify-center print:block z-2 {{ !$content->photos?->count() && !$content->text_style ? 'px-8 py-4' : 'p-8 md:px-12' }}">
                @if ($content->header && $content->layout !== 'links')
                    <h{{ $header ? '1' : '2'}}>{{ $content->header }}</h{{ $header ? '1': '2' }}>
                @endif
                {!! $content->body !!}
            </div>

        </div>
