{% for news in content %}
<div class="border rounded-lg shadow grid w-full gap-2 px-2 pt-2 mb-4">
    <a href="{{news.url}}">
        <h1 class="text-[16px] font-bold leading-normal">{{news.title}}</h1>
        <img src="{{news.specific.search_image.file.url}}" alt="{{news.title}}" class="rounded-lg h-full">
        <!-- <div class="line-clamp-4 text-[15px] opacity-70">
            {{news.specific.shortDesc|safe}}
        </div> -->
    </a>
    <div class="flex w-full gap-4 text-[14px]">
        {% if news.specific.show_author %}
        <h2 class="flex items-center gap-1"><i class='bx bxs-user'></i> <b>{{news.owner}}</b></h2>
        {% endif %}
        <h2 class="opacity-70 flex items-center gap-1"><i class='bx bx-calendar'></i>
            {{news.first_published_at|date:"d M,Y"}}</h2>
        <h2 class="opacity-70 flex items-center gap-1">
            <i class='bx bx-stopwatch'></i> {{news.specific.readTime}} min read
        </h2>
    </div>

    <div class="flex justify-end text-[9px] text-blue-600">

        {% if news.specific.srcTitle and news.specific.srcURL %}
        <a href="{{news.specific.srcURL}}" target="_blank" class="">
            Source {{news.specific.srcTitle}}
        </a>
        {% endif %}
    </div>
</div>
{% endfor %}