@php
    $image = $widget->imageAsArray('image', 'desktop');
@endphp

<a href="{{ $widget->translatedInput('button_link') }}"
    class="overflow-hidden rounded-lg shadow-xl hover:shadow-md duration-300 card">
    <img src="{{ $image['src'] }}" alt="{{ $image['alt'] }}" class="object-cover w-full h-80">
    <div class="flex flex-col items-start p-5 content">
        <div class="flex flex-row items-center mb-6 title gap-2">
            <img src="{{ $widget->file('icon') }}" class="icon w-7">
            <h4 class="mb-0">{!! $widget->translatedInput('title') !!}</h4>
        </div>
        <p class="mb-8 grow">{!! $widget->translatedInput('text') !!}</p>
        <span class="flex items-center px-6 py-3 font-medium text-white rounded-lg gap-3 bg-orange">
            {{ $widget->translatedInput('button_title') }}
            <svg xmlns="http://www.w3.org/2000/svg" width="7.008" height="14.016" viewBox="0 0 7.008 14.016">
                <path id="Path_58" data-name="Path 58"
                    d="M2.656.875A.511.511,0,0,1,2.5.5.538.538,0,0,1,2.625.156L8.281-6,2.625-12.156a.51.51,0,0,1,.031-.719.51.51,0,0,1,.719.031l6,6.5a.535.535,0,0,1,0,.688l-6,6.5A.51.51,0,0,1,2.656.875Z"
                    transform="translate(-2.492 13.008)" fill="#fff" />
            </svg>
        </span>
    </div>
</a>