<a class="c-card  @modifiers('c-card')" href="{{$cardLink ?? 'javascript:void(0)'}}">

    <div class="c-card__frame">
        <img class="c-card__img" alt="card image" src="{{$cardImage ? $cardImage : '/img/placeholders/image.svg'}}" width="360" height="216" data-kal="photo-zoom-out" style="--kal-duration: 800ms"/>
    </div>

    <div class="c-card__body">
        @if(!empty($cardTitle))
            <h3 class="c-card__title">{{ $cardTitle }}</h3>
        @endif
        @if(!empty($cardDate))
            <p class="c-card__date">{{ $cardDate }}</p>
        @endif

        <div class="c-card__description">
            {!! $cardDescription ?? '' !!}
        </div>

        @if(!empty($cardButtonText))
            <div class="c-card__action">
                @include('components.textButton', [
                    'tagName' => 'div',
                    'modifiers' => ['icon'],
                    'buttonText' => $cardButtonText,
                    'buttonLink' => $cardLink,
                ])
            </div>
        @endif

    </div>

</a>