@php
    $img_src = $art->thumb ?? '';
    $img_srcset = $art->thumb_srcset ?? '';
    $base_height = 360;
    $orig_width = (int) ($art->width ?? 0);
    $orig_height = (int) ($art->height ?? 0);
    $img_height = $base_height;
    $img_width = ($orig_width > 0 && $orig_height > 0)
        ? (int) round($orig_width * ($base_height / $orig_height))
        : 600;
@endphp

<article class="artwork" itemscope itemtype="http://schema.org/Photograph">
    <a href="{{ $art->url ?? '#' }}" itemprop="url">
        <div class="ribbon gid_{{ $art->gid_num }}" title="{{ $art->category_name ?? '' }}" itemprop="genre">
            <span>{{ $art->category_name ?? '' }}</span>
        </div>

        <img
            src="{{ $img_src }}"
            srcset="{{ $img_srcset }}"
            loading="lazy"
            decoding="async"
            alt="{{ e($art->name) }}"
            width="{{ $img_width }}"
            height="{{ $img_height }}"
            class="img-responsive"
            itemprop="thumbnailUrl"
        >

        <div class="details">
            <div class="info" itemprop="author">
                <span class="fa fa-user"></span> {{ $art->uname ?? '' }}
            </div>

            <div class="title" itemprop="name">
                {{ $art->name }}
            </div>
        </div>
    </a>
</article>