@if(!empty($care['includes']))
    <section class="care-teaser section" aria-labelledby="care-teaser-title" @sectionTone($care['style'] ?? [])>
        <div class="container care-teaser__inner">
            <div class="care-teaser__copy reveal">
                <p class="eyebrow" data-edit="maintenance.frontEyebrow">{{ $care['frontEyebrow'] ?? '' }}</p>
                <h2 id="care-teaser-title"><x-editable path="maintenance.frontTitle">{{ $care['frontTitle'] ?? '' }}</x-editable></h2>
                <p class="section-head__desc"><x-editable path="maintenance.frontDescription">{{ $care['frontDescription'] ?? '' }}</x-editable></p>
                <div class="care-teaser__actions">
                    <a class="btn btn--ink" href="{{ route('maintenance') }}">
                        <x-editable path="maintenance.frontCta">{{ $care['frontCta'] ?? 'See care plans' }}</x-editable>
                        <span class="btn__arrow" aria-hidden="true">&rarr;</span>
                    </a>
                    @if(!empty($care['frontPrice']))
                        <span class="care-teaser__price" data-edit="maintenance.frontPrice">{{ $care['frontPrice'] }}</span>
                    @endif
                </div>
            </div>

            <ul class="care-teaser__list reveal">
                @foreach(array_slice($care['includes'], 0, 4) as $index => $include)
                    <li>
                        <span class="care-teaser__icon" aria-hidden="true" data-edit="maintenance.includes.{{ $index }}.icon">{{ $include['icon'] ?? '' }}</span>
                        <div>
                            <strong><x-editable path="maintenance.includes.{{ $index }}.title">{{ $include['title'] ?? '' }}</x-editable></strong>
                            <small><x-editable path="maintenance.includes.{{ $index }}.description">{{ $include['description'] ?? '' }}</x-editable></small>
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
    </section>
@endif