fix: design changes

packages/base/Resources/Private/Extensions/News/Partials/List/Item.html

@@ -1,7 +1,25 @@
 <div class="news-list-item {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:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
+            <f:then>
+              <picture>
+                <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">
             <f:if condition="{newsItem.firstCategory}">