<div class="o-trophies">
    <div class="o-trophies__main">
        <div class="o-trophies__desc  s-text  s-text--on-dark" data-kal="slide-up">
            @if(isset($component->title))
                <h3>{!! $component->title !!}</h3>
            @endif

            @if(isset($component->description))
                {!! $component->description !!}
            @endif

            @if(isset($component->button_label) && $component->button_label != null && isset($component->button_link) && $component->button_link != null)
                <div>
                    @include('components.button', [
                        'type' => 'ghost',
                        'buttonText' => $component->button_label,
                        'buttonLink' => $component->button_link
                    ])
                </div>
            @endif
        </div>

        <ul class="o-trophies__list">

            @foreach($component->trophies as $trophyKey => $trophy)
                <li class="o-trophies__item" data-kal="slide-up" style="--kal-delay: {{($trophyKey * 150) + 200}}ms;">
                    <div class="c-award">
                        <img class="c-award__image" src="{{$trophy->image->first()->small_image_url ?? '/img/icons/award.svg'}}" alt="">
                        <p class="c-award__name">{{$trophy->name}}</p>
                    </div>
                </li>
            @endforeach

        </ul>
    </div>
</div>