@section('componentable-area-' . $loop->iteration)

    <div class="l-contain  l-split @if($component->reversed) l-split--is-reversed @endif">
        <div class="l-split__column  l-split__column--vpad  s-text">

            {!! !empty($component->text) ? $component->text : config('atomic.text') !!}

            @if(count($component->buttons) > 0 && $component->buttons[0]->translation)
                @include('site.components.button', [
                    'modifiers' => ['icon'],
                    'buttonText' => $component->buttons[0]->translation->label,
                    'buttonLink' => $component->buttons[0]->translation->url
                ])
            @endif
        </div>
        <div class="l-split__column">
            @include('site.components.image', [
                'images' => $component->image,
                'imageId' => 'componentable-area-' . $loop->iteration.'-slider',
                'caption' => $component->caption
            ])
        </div>
    </div>

@endsection

@include('site.organisms.componentables.componentableRow')