@if(!empty($component->image) )

    <div id="component-item-{{$loop->iteration}}" class="o-hero">

        <div class="o-hero__main">

            <div class="o-hero__title-wrapper">
                <span class="o-hero__page-location">{{ $page->translation->name }}</span>
                <h1 class="o-hero__title">{{ $component->name }}</h1>
            </div>

            <picture class="o-hero__image">
                <source media="(max-width: 550px)" srcset="{{ $component->image->small_image_url }}">
                <source media="(max-width: 800px)" srcset="{{ $component->image->medium_image_url }}">
                <img class="o-hero__img  u-object-cover" alt="{{$component->image->name}}" src="{{$component->image->large_image_url}}" />
            </picture>

            <div class="o-hero__cta">
                @include('site.components.heroCta', [
                    'heroCtaTitle' => $component->name,
                    'heroCtaLink' => $component->button_link,
                    'heroCtaText' => $component->button_label
                ])
            </div>

            <a class="o-hero__button  @if(isset($component->button_link) && \Str::startsWith($component->button_link, ['#'])) js-scroll-to-target @endif " href="{{ $component->button_link }}" @if(isset($component->button_link) && \Str::startsWith($component->button_link, ['http://', 'https://'])) target="_blank" @endif>
                @include('site.components.textButton', [
                'isButton' => true,
                'textButtonText' => $component->button_label,
                'textButtonClasses' => 'o-hero__cta-button',
                'modifiers' => ['icon', 'icon-down', 'on-dark']
                ])
            </a>

        </div>

    </div>

@endif