@if ($card)
    <div
        class="value-box bg--{{ $card->bg_color }} @unless ($card->image) value-box--text @endunless"
        data-aos="fade"
        data-aos-duration="800"
        data-aos-delay="{{ $position * 50 }}"
    >
        <div class="value-box__inner">
            @if ($card->image)
                <picture>
                    <source media="(min-width: 768px)" srcset="{{ getMediaUrl($card->image->filename, '800x800') }}.webp" type="image/webp">
                    <source media="(min-width: 768px)" srcset="{{ getMediaUrl($card->image->filename, '800x800') }}">
                    <source srcset="{{ getMediaUrl($card->image->filename, '600x600') }}.webp" type="image/webp">
                    {!! getMediaImg($card->image, '600x600', htmlspecialchars($card->title)) !!}
                </picture>
            @else
                <div class="value-box__topic">{{ $card->subject }}</div>
                <div class="value-box__value">{{ $card->title }}</div>
            @endif
        </div>
    </div>
@endif