<div class="c-alternative-hero  @modifiers('c-alternative-hero')">

    <div class="c-alternative-hero__body">

        <div>
            <div class="c-alternative-hero__content">
                <h1 class="c-alternative-hero__title">{{ !empty($alternativeHeroTitle) ? $alternativeHeroTitle : '' }}</h1>
                @if(!empty($alternativeHeroSubTitle))
                    <p class="c-alternative-hero__subtitle">{!! nl2br($alternativeHeroSubTitle) !!}</p>
                @endif
            </div>

            @if(!empty($alternativeHeroImage))
                <picture class="c-alternative-hero__image">
                    @foreach(['original', 'large', 'medium', 'small'] as $imageSize)
                        @if(!$loop->last)
                            <source
                                    @switch($imageSize)
                                    @case('medium')
                                    media="(min-width: 430px)"
                                    @break
                                    @case('large')
                                    media="(min-width: 950px)"
                                    @break
                                    @case('original')
                                    media="(min-width: 1500px)"
                                    @break
                                    @endswitch
                                    srcset="{{ $alternativeHeroImage->first()->{$imageSize.'_image_url'} }}">
                        @else
                            <img src="{{ str_replace('\\', '/', $alternativeHeroImage->first()->{$imageSize.'_image_url'}) }}" alt="{{ (!empty($alternativeHeroImage->first()->name)) ? $alternativeHeroImage->first()->name : 'image' }}">
                        @endif
                    @endforeach
                </picture>
            @endif

        </div>

    </div>

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