<div class="o-data">
    <div class="o-data__main">
            <figure class="o-data__figure1" data-kal="slide-up" style="--kal-duration: 1.8s;">
                <img class="o-data__img" src="{{$component->image_left->first()->large_image_url ?? '/img/placeholder-image.svg'}}" alt="">
            </figure>

            <figure class="o-data__figure2" data-kal="slide-down" style="--kal-duration: 2.2s;">
                <img class="o-data__img" src="{{$component->image_right->first()->large_image_url ?? '/img/placeholder-image.svg'}}" alt="">
            </figure>

        <div class="o-data__icon">
            @include('components.icons.build')
        </div>

        <div class="o-data__content">
            <dl class="o-data__list" data-kal="slide-left" style="--kal-duration: 2.5s;">
                @if($component->tabs->count() > 0)
                    @foreach($component->tabs as $tab)
                        @if(!empty($tab->key) && !empty($tab->value))
                            <dt>{{ $tab->key }}</dt>
                            <dd>{{ $tab->value }}</dd>
                        @endif
                    @endforeach
                @else
                    <dt>Project gegevens</dt>
                    <dd>Niet bekend</dd>
                @endif
            </dl>
        </div>

    </div>
</div>