<div class="journey-block block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="journey-block__wrapper">
        @include('frontend.templates.components.block_header')
        <div class="journey-block__cards">
            <div class="journey-block__items">
                @foreach($block->cards as $i => $card)
                    <div
                        class="journey-block__item journey-block__item--{{ $card->bg_color }} @if($card->svg) journey-block__item--icon @endif"
                        data-aos="fade"
                        data-aos-delay="{{ 100 + (100 * $i) }}"
                        data-role="cta-block"
                    >
                        <div class="journey-block__step journey-block__step--mobile"><span class="bg--{{ $card->bg_color }}"></span></div>
                        <div @if(ctaNotEmpty($card->cta)) data-action="click-cta" @endif>
                            @if($card->svg && file_exists(getStoragePath(config('path.internal.media')) . '/' . $card->svg->filename))
                                <div class="journey-block__icon fill--{{ $card->bg_color }}" data-role="journey-icon">
                                    {!! file_get_contents(getStoragePath(config('path.internal.media')) . '/' . $card->svg->filename) !!}
                                </div>
                            @endif
                            <div class="journey-block__item-box" >
                                <div class="journey-block__step desktop-only"><span class="bg--{{ $card->bg_color }}"></span></div>
                                <div class="journey-block__inner">
                                    <div class="journey-block__item-title">@title($card->title)</div>
                                    <div class="journey-block__item-content">
                                        <p>{{ $card->excerpt }}</p>
                                        <div class="journey-block__item-cta">
                                            @if($card->cta)
                                                {!! generateLink($card->cta, 'link-left-arrow link-animation-arrow') !!}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="journey-block__items journey-block__items--mobile">
                @foreach($block->cards as $i => $card)
                    <div
                        class="journey-block__item"
                        data-aos="fade"
                        data-aos-delay="{{ 100 + (100 * $i) }}"
                        data-role="cta-block"
                    >
                        <p>{{ $card->excerpt }}</p>
                        <div class="journey-block__item-cta">
                            @if($card->cta)
                                {!! generateLink($card->cta, 'link-left-arrow link-animation-arrow') !!}
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        @if($block->cta1)
            <div class="journey-block__cta">
                {!! generateLink($block->cta1, 'std-button std-button--large') !!}
            </div>
        @endif
    </div>
</div>
