<div class="c-hero  @modifiers('c-hero')">
    @if(isset($heroImages) && $heroImages->isNotEmpty())
        <div class="c-hero__images">
            @foreach($heroImages as $heroImage)
                <figure class="c-hero__figure @if($heroImages->count() > 1) js-tabslider-image @endif @if($loop->iteration == 1) is-active @endif" data-tab-id="{{$loop->iteration}}">
                    <div class="c-hero__image  c-hero__image--medium" style="background-image: url('{{$heroImage->medium_image_url}}')"></div>
                    <div class="c-hero__image  c-hero__image--large" style="background-image: url('{{$heroImage->large_image_url}}')"></div>
                    <div class="c-hero__image  c-hero__image--huge" style="background-image: url('{{$heroImage->original_image_url}}')"></div>
                </figure>
            @endforeach
        </div>
    @endif

    @hasSection('hero-body')
        <div class="c-hero__body  @if(isset($heroImages) && $heroImages->isNotEmpty()) on-dark @endif  @if(isset($heroOnDark) && $heroOnDark) on-dark @endif">
            @yield('hero-body')
        </div>
    @endif

{{--    <div class="c-hero__swirl">--}}
{{--        @include('site.components.shape.swirl')--}}
{{--    </div>--}}
</div>