@if ($section['section_fields_blockquote'] ?? false)
    @if ($section['section_fields_blockquote']['image'] ?? false)
        @php
            $imageData = ResponsivePics::get_image_data(
                $section['section_fields_blockquote']['image'],
                'xs:300, md:700, lg:1440',
                0,
                '',
                false,
                false,
            );
        @endphp
    @endif
    <div class="bg-light xs:p-10 js-rellax relative z-10 col-span-12 flex flex-col justify-center overflow-hidden p-5 text-white md:col-span-5 lg:col-span-5 lg:p-14"
        data-rellax-speed="0" data-rellax-tablet-speed="-2" data-rellax-desktop-speed="-1">
        <blockquote class="md:aspect-10/9 relative z-10 flex flex-col justify-center">
            <p
                class="{{ strlen($section['section_fields_blockquote']['quote']) > 50 ? 'text-[clamp(24px,2vw,28px)]' : 'text-[clamp(28px,3vw,32px)]' }} leading-[1.2]">
                {!! $section['section_fields_blockquote']['quote'] !!}</p>
            @if ($section['section_fields_blockquote']['author'] ?? false)
                <br>— {!! $section['section_fields_blockquote']['author'] !!}
            @endif
        </blockquote>
        <div class="absolute inset-0 opacity-30"
            {{ $imageData ?? null ? 'style=background-image:url(' . $imageData['sources'][0]['source1x'] . ');background-size:cover;background-position:center;' : '' }}>
            <img src="{{ Vite::asset('resources/images/quote.svg') }}" alt=""
                class="{{ $imageData ?? null ? 'opacity-50' : 'opacity-10' }} absolute left-0 top-0 h-auto w-10/12" />
        </div>
    </div>
@endif