<div class="news-list-item fade-in-on-scroll{f:if(condition: '{big}', then: ' news-list-item-big')}">
    <f:link.page pageUid="{settings.detailPid}" class="news-item-link" additionalParams="{tx_news_pi1: {news: newsItem.uid, action: 'detail', controller: 'News'}}">
        <f:if condition="{newsItem.media}">
            <f:then>
              <picture>
                <!-- WEBP source -->
                <source
                  type="image/webp"
                  srcset="
                    {f:uri.image(image:newsItem.media.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
                    {f:uri.image(image:newsItem.media.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
                    {f:uri.image(image:newsItem.media.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
                  sizes="(max-width: 320px) 100vw,
                         (max-width: 768px) 50px,
                         400px" />

                <!-- Fallback source -->
                <source
                  srcset="
                    {f:uri.image(image:newsItem.media.0, width:'320c', cropVariant:'default')} 320w,
                    {f:uri.image(image:newsItem.media.0, width:'768c', cropVariant:'default')} 768w,
                    {f:uri.image(image:newsItem.media.0, width:'1024c', cropVariant:'default')} 1024w"
                  sizes="(max-width: 320px) 100vw,
                         (max-width: 768px) 50vw,
                         400px" />
                <f:image
                  image="{newsItem.media.0}"
                  treatIdAsReference="1"
                  cropVariant="default"
                  width="1024c"
                  alt="{newsItem.title}"
                  class="news-item-grid-image" />
              </picture>
            </f:then>
        </f:if>
        <div class="news-item-content">
            <time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
              <f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
            </time>
            <h3 class="news-item-title">{newsItem.title}</h3>
        </div>
    </f:link.page>
</div>
