<div class="c-hero c-hero--partial @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

    <div class="c-hero__body  c-hero__body--asym">
        @hasSection('hero-body')
            @yield('hero-body')
        @endif

{{--        <div class="c-hero__grid">--}}
{{--            @hasSection('hero-body')--}}
{{--                <div class="c-hero__body">--}}
{{--                    @yield('hero-body')--}}
{{--                </div>--}}
{{--            @endif--}}
{{--        </div>--}}
    </div>

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