@php $steps = $data['steps'] ?? []; @endphp
<section class="{{ $cls }}" {{ $attrs }}>
    <div class="container-page">
        @include('builder.partials.head')

        <ol @class([
            'home-steps home-steps--row',
            'home-steps--5' => count($steps) === 5,
            'pb-steps--'.count($steps),
        ])>
            @foreach($steps as $i => $item)
                <li class="home-step-card">
                    <span class="home-step-card__num">{{ ! empty($data['auto_number']) ? $i + 1 : ($item['step'] ?? '') }}</span>
                    <h3 class="home-step-card__title">{{ $item['title'] ?? '' }}</h3>
                    <p class="home-step-card__text">{{ $item['text'] ?? '' }}</p>
                </li>
            @endforeach
        </ol>

        @if(filled($data['image'] ?? null))
            <figure class="home-figure home-figure--center mt-12">
                <img src="{{ $url($data['image']) }}" alt="{{ $data['image_alt'] ?? '' }}" width="960" height="400" class="home-editorial-photo home-editorial-photo--wide" loading="lazy" decoding="async">
                @if(filled($data['caption'] ?? null))
                    <figcaption class="home-figure-caption home-figure-caption--center">{{ $data['caption'] }}</figcaption>
                @endif
            </figure>
        @endif
    </div>
</section>