<section class="service-blocks-section l-grid o-block">
    <div class="l-grid--content">
        <h2>{{$links->services->name}}</h2>
        <div class="o-service-blocks">
            @foreach($services as $service)
                @if($page->code_name == 'home' && $loop->iteration > 3)
                    @continue
                @endif
                <a class="c-service-block" href="/{{ $links->services->route}}/{{$service->translation->slug}}">
                    @if(isset($service->images) && sizeof($service->images) > 0)
                        @if(explode('.', $service->images[0]->path)[1] == 'svg')
                            <div class="c-service-block__icon">
                                <img src="{{$service->images[0]->path}}"/>
                            </div>
                        @else
                            <div class="c-service-block__icon">
                                <img src="{{$service->images[0]->small_image_url}}" class="c-service-block__icon"/>
                            </div>
                        @endif
                    @else
                        <div class="c-service-block__icon"></div>
                    @endif
                    <h3>{{$service->translation->name}}</h3>
                    {!! $service->translation->description !!}
                    @include('site.components.button', ['buttonText' => 'Lees meer', 'modifiers' => ['icon', 'ghost']])
                </a>
            @endforeach

        <a href="{{$links->services->route}}" class="c-service-block c-service-block--narrow c-button--icon">
            alle diensten
            <i class="c-button__icon">@include('site.components.icons.arrow')</i>
        </a>
        </div>
    </div>
</section>