hugo-theme-stack/layouts/_partials/article-list/tile.html

{{ $image := partial "helper/image" (dict "Image" .context.Params.image "Resources" .context.Resources "Context" .context) }}
<article class="{{ if $image }}has-image{{ end }}">
    <a href="{{ .context.RelPermalink }}">
        {{ if $image }}
        <div class="article-image">
            {{ partial "helper/thumbnail-image" (dict 
                "Resource" $image.Resource
                "Width" 250
                "Height" 150
                "Resize" .context.Site.Params.ImageProcessing.Thumbnail.Enabled
                "Attributes" (dict
                    "src" $image.Permalink
                    "alt" (printf "Featured image of post %s" .context.Title)
                    "loading" "lazy"
                    "width" $image.Width
                    "height" $image.Height
                )
            ) }}
        </div>
        {{ end }}

        <div class="article-details"
            {{- if and $image (reflect.IsImageResourceProcessable $image.Resource) -}}
                {{- $colors := $image.Resource.Colors -}}
                {{- if $colors -}}
                    {{- $vibrant := index $colors 0 -}}
                    {{- $darkMuted := index $colors 1 | default $vibrant -}}
                    style="background: linear-gradient(0deg, {{ $darkMuted }}80 0%, {{ $vibrant }}C0 100%);"
                {{- end -}}
            {{- end -}}
        >
            <h2 class="article-title">
                {{- .context.Title -}}
            </h2>
        </div>
    </a>
</article>