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

            <div class="services__grid">
                @foreach($services['items'] as $service)
                    <article class="service-card reveal">
                        <div class="service-card__top">
                            <span class="service-card__icon" aria-hidden="true" data-edit="services.items.{{ $loop->index }}.icon">{{ $service['icon'] ?? '' }}</span>
                            <span class="service-card__index">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        </div>
                        <h3 class="service-card__title"><x-editable path="services.items.{{ $loop->index }}.title">{{ $service['title'] ?? '' }}</x-editable></h3>
                        <p class="service-card__desc"><x-editable path="services.items.{{ $loop->index }}.description">{{ $service['description'] ?? '' }}</x-editable></p>
                        @if(!empty($service['features']))
                            <ul class="list list--tight">
                                @foreach($service['features'] as $feature)
                                    <li><span class="list__mark" aria-hidden="true">&#10003;</span><x-editable path="services.items.{{ $loop->parent->index }}.features.{{ $loop->index }}">{{ $feature }}</x-editable></li>
                                @endforeach
                            </ul>
                        @endif
                        <div class="service-card__foot">
                            <span class="service-card__price" data-edit="services.items.{{ $loop->index }}.price">{{ $service['price'] ?? '' }}</span>
                            <a class="link-arrow" href="{{ ($service['ctaHref'] ?? '') ?: '#contact' }}" data-edit-href="services.items.{{ $loop->index }}.ctaHref">
                                <x-editable path="services.items.{{ $loop->index }}.cta">{{ $service['cta'] ?? 'Talk to us' }}</x-editable>
                                <span aria-hidden="true">&rarr;</span>
                            </a>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>
@endif