@php
    $fade_direction = $block->invert ? 'right' : 'left';
@endphp
<div class="hero-image-box hero-image-box--{{ $block->bg_color }} block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}} @if ($block->invert) hero-image-box--invert @endif">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="hero-image-box__wrap">
        <div class="hero-image-box__image" data-aos="fade-down" data-aos-delay="400">
            @if($block->image1)
                <picture>
                    <source media="(min-width: 768px)" type="image/webp" srcset="{{ getMediaUrl($block->image1->filename, '1145x700') }}.webp">
                    <source media="(min-width: 768px)" srcset="{{ getMediaUrl($block->image1->filename, '1145x700') }}">
                    <source type="image/webp" srcset="{{ getMediaUrl($block->image1->filename, '660x520') }}.webp">
                    <img src="{{ getMediaUrl($block->image1->filename, '660x520') }}" alt="{{ htmlentities($block->block_title) }}">
                </picture>
            @endif
            @if($block->image2)
                <div class="hero-image-box__overlay-logo">
                    <picture>
                        <source type="image/webp" srcset="{{ getMediaUrl($block->image2->filename, '500x') }}.webp">
                        <img src="{{ getMediaUrl($block->image2->filename, '500x') }}" alt="{{ htmlentities($block->block_title) }}">
                    </picture>
                </div>
            @endif
        </div>
        <div class="hero-image-box__title-box-wrap">
            <div class="hero-image-box__title-box">
                <div class="hero-image-box__title-box-bg1" data-aos="fade-{{ $fade_direction }}" data-aos-delay="500"></div>
                <div class="hero-image-box__title-box-bg2" data-aos="fade-{{ $fade_direction }}" data-aos-delay="500"></div>
                <div class="hero-image-box__title-box-content" data-aos="fade-{{ $fade_direction }}" data-aos-delay="500">
                    @if ($block->block_title)
                        <h1>@title($block->block_title)</h1>
                    @endif
                    @if ($block->block_subtitle)
                        <p>@title($block->block_subtitle)</p>
                    @endif
                    @if ($block->cta1)
                        {!! generateLink($block->cta1, 'std-button std-button--xl ' . ($block->cta_color === 'orange' ? 'std-button--orange' : 'alt-color')) !!}
                    @endif
                </div>
            </div>
        </div>
        @if($block->content)
            <div class="hero-image-box__content-wrap">
                <div class="hero-image-box__content">
                    <div class="hero-image-box__content-text rich-content-system">
                        {!! $block->content !!}
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>