<div class="md:flex relative w-full max-w-6xl print:hidden">

    @if ($content->photos->count())
        <div class="w-full h-full md:absolute z-2 md:rounded-lg overflow-hidden shadow max-h-[600px]">
            @include ('content-elements.photo', ['photo' => $content->photos->first(), 'max_size' => 1152 ])
        </div>

        <div class="hidden absolute md:flex flex-1 z-3 items-center justify-start h-full w-1/3 max-h-[600px]">
            <div class="bg-color bg-opacity-90 flex flex-col items-center px-8 rounded-r-lg shadow w-full border-primary border-r-4">
                <div class="py-4">
                    <img src="images/logo.svg" width="169" height="40" class="w-full" alt="Brentwood College School Logo" />
                </div>
            </div>
        </div>

        <div class="flex-1"></div>
    @endif

    <div class="flex-2 flex justify-center relative z-3 w-full">

        <div class="bg-highlight inquiry-form-container md:m-8 md:shadow w-full md:max-w-lg md:rounded-lg">

            @if ($content->header || $content->body)
                <div class="flex justify-center relative">
                    <div class="text-block relative z-4 p-8">

                        @if ($content->header)
                            <h{{ $header ? '1' : '2'}}>{{ $content->header }}</h{{ $header ? '1': '2' }}>
                        @endif
                        <div class="body">
                            {!! $content->body !!}
                        </div>
                        @if ($content->body)
                            <img src="/images/dash.svg" class="text-block-dash fill-current" />
                        @endif
                    </div>
                </div>
            @endif

            <inquiry :content='@json($content)'></inquiry>

        </div>

    </div>

</div>

