{{ $c := "c-compositions-card" }}
<div class="{{$c}} col col-4 col-d-6 col-t-12">
  <div class="{{$c}}__inner">

    {{ if .image }}
    <div class="{{$c}}__image-wrap">
      <a class="{{$c}}__image" href="{{ .url }}">
        {{ $size := partial "image-size.html" .image }}
        <img {{ if .eager }}fetchpriority="high"{{ else }}loading="lazy"{{ end }} decoding="async" src="{{ partial "jsdelivr-url.html" .image }}" alt="{{ .title }}"{{ with $size }} width="{{ .width }}" height="{{ .height }}"{{ end }}>
      </a>
    </div>
    {{ end }}

    <div class="{{$c}}__content">

      <div class="{{$c}}__tags-box">
        {{ range .tags }}
          <a href="{{ .RelPermalink }}" class="{{$c}}__tag">{{ .LinkTitle }}</a>
        {{ end }}
      </div>

      <h2 class="{{$c}}__title">
        <a href="{{ .url }}">{{ .title }}</a>
      </h2>

      <p class="{{$c}}__excerpt">
        {{ if .description }}
          {{ .description }}
        {{ else }}
          {{ truncate 120 .Summary | safeHTML }}
        {{ end }}
      </p>

      <div class="{{$c}}__meta">
        <div class="{{$c}}__author-image">
          {{ $avatarSize := partial "image-size.html" hugo.Data.author.author_image }}
          <img loading="lazy" decoding="async" src="{{ partial "jsdelivr-url.html" hugo.Data.author.author_image }}" alt=""{{ with $avatarSize }} width="{{ .width }}" height="{{ .height }}"{{ end }}>
        </div>
        <div class="{{$c}}__info">
          <div class="{{$c}}__author-name">
            {{ T "t_author_name" "Author Name" }} </div>
          <span class="{{$c}}__date"><time datetime="{{ .date.Format "2006-01-02T15:04:05Z07:00" }}">{{ partial "format-date.html" (dict "date" .date) }}</time></span>
        </div>
      </div>

    </div>
  </div>
</div>