@if(!empty($process['steps']))
    <section class="process section" id="process" aria-labelledby="process-title" @sectionTone($process['style'] ?? [])>
        <div class="container">
            <div class="section-head section-head--split reveal">
                <div>
                    <p class="eyebrow" data-edit="process.eyebrow">{{ $process['eyebrow'] ?? '' }}</p>
                    <h2 id="process-title"><x-editable path="process.title">{{ $process['title'] ?? '' }}</x-editable></h2>
                </div>
                <p class="section-head__desc"><x-editable path="process.description">{{ $process['description'] ?? '' }}</x-editable></p>
            </div>

            <ol class="process__list">
                @foreach($process['steps'] as $step)
                    <li class="process__step reveal">
                        <span class="process__number">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <h3><x-editable path="process.steps.{{ $loop->index }}.title">{{ $step['title'] ?? '' }}</x-editable></h3>
                        <p><x-editable path="process.steps.{{ $loop->index }}.description">{{ $step['description'] ?? '' }}</x-editable></p>
                        <span class="process__duration" data-edit="process.steps.{{ $loop->index }}.duration">{{ $step['duration'] ?? '' }}</span>
                    </li>
                @endforeach
            </ol>
        </div>
    </section>
@endif