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

    <div class="o-ci  @if($component->reversed) o-ci--is-reversed @endif">
        <div class="o-ci__content">

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

            @if(count($component->buttons) > 0 && $component->buttons[0]->translation)
                <div class="o-ci__action">
                    @include('site.components.button', [
                        'modifiers' => ['icon'],
                        'type' => $component->bigButton ? '' : 'text',
                        'buttonText' => $component->buttons[0]->translation->label,
                        'buttonLink' => $component->buttons[0]->translation->url
                    ])
                </div>
            @endif
        </div>
        <div class="o-ci__image">
            @include('site.components.image', ['images' => $component->image, 'imageId' => 'componentable-area-' . $loop->iteration.'-slider' ])
        </div>
    </div>

@endsection

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