@php
        $bg_image_mobile = getimagesize($section['background_image_mobile']);
        $bg_image = getimagesize($section['background_image']);
    @endphp

<section class="hero-banner" @if ($bg_image[0] && $bg_image[1] == $bg_image[0]) style="height: 420px;" @endif > 
    <div class="hero-image" id="heroImage{{ $section['id']??'' }}"></div>
    <div class="container h-100">
        <div class="content">
            <div class="row h-100">
                @foreach ($data??[] as $item)
                    <div class="{{ $item['class']??'col-md-12' }} d-flex justify-content-center align-self-center flex-column">
                        <div style="color: {{ $section['text_color']??'#ffffff' }}; height:100%;">
                            <div class="hero-overlay">
                                @if (isset($item['title']) && !empty($item['title']))
                                <h2 class="hero-header">{{ $item['title'] }}</h2>
                                @endif
                                <div class="hero-content">
                                    @if (isset($item['content']) && !empty($item['content']))
                                    {!! $item['content'] !!}
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

    </div>
</section>
  



@push('style')
    @if (isset($section['id']))

    @if ($bg_image_mobile[0] && $bg_image_mobile[1] == $bg_image_mobile[0])  
    <style nonce="{{ csp_nonce() }}">
    
    #heroImage{{ $section['id']??'' }} {

                background-image: url({{ $section['background_image_mobile'] }});
                background-size: contain;
            }
    </style>
   
 @else 
        <style nonce="{{ csp_nonce() }}">
            @if (isset($section['background_image_mobile']) && !empty($section['background_image_mobile']))
                #heroImage{{ $section['id']??'' }} {

                    background-image: url({{ $section['background_image_mobile'] }});
            
                }
            @endif
            @if (isset($section['background_image']) && !empty($section['background_image']))
            @media (min-width: 541px) {
                #heroImage{{ $section['id']??'' }} {
                    background-image: url({{ $section['background_image'] }});
            
                }
            }
            @endif
        </style>
        @endif
    @endif
@endpush