{{--
    Process step:
    Each step is a grid-layout so we can switch the image and text position.
    So the step-elements children are flex-items.
    Because flex-items don't calculate vertical padding by its with,
    we need an extra container to get the equaled padding around the text.

--}}
<section id="step-{{ $key }}" class="process-step">

    {{-- Add breadcrumb in first step--}}
    {{--@if($key == 'meet')--}}
        {{--@include('site.partials.breadcrumb')--}}
    {{--@endif--}}

    {{-- Image --}}
    <div class="image" style="background-image: url(/img/komma/static/process_{{ $key }}.jpg)">
    </div>

    {{-- This is the extra container that becomes the grid-item --}}
    <div class="text-block-holder">

        {{-- This is a normal block element, we can use our padding trick here --}}
        <div class="text-block" data-in-viewport="ViewportAnimations.Process.show">
            @include('site.partials.process.text')
        </div>

    </div>

</section>