listing-grid.ejs

```{=html}

<%
// Number of columns
const cols = 4;

// Card alignment
const align = "left";

// Borders
const hideBorders = false;

// Cap Options
const imgHeight = "100%";
%>

<div class="list grid quarto-listing-cols-<%=cols%>">
<% for (const item of items) { %>
  <div class="g-col-1" <%= metadataAttrs(item) %>>
    <a href="<%= item.slides.url %>" target="_blank" rel="noopener" class="grid-item-link"> <!-- Added link wrapper -->
      <div class="quarto-grid-item card h-100 <%-`card-${align}`%><%= hideBorders ? ' borderless' : '' %>">
        <% if (item.image) { %>
          <p class="card-img-top">
            <img src="<%= item.image %>" class="thumbnail-image card-img" style="height: auto;" alt="<%= item['image-alt'] %>">
          </p>
        <% } else { %>
          <div class="card-img-bg" <%= imgHeight ? ` style="height: ${imgHeight};"` : '' %>>&nbsp;</div>
        <% } %> 
        <% if ('title' || 'subtitle' || 'description' || 'author' || 'date' || otherFields.length > 0) { %>
          <div class="card-body post-contents">
            <% if ('title') { %><h5 class="no-anchor card-title listing-title"><%= item.title %></h5><% } %>
            <% if ('subtitle') { %><div class="card-subtitle listing-subtitle"><%= item.subtitle %></div><% } %>

            <% if ('description') { %>
              <div class="card-text listing-description delink"><%= item.description %></div>
            <% } %>

            <% 
            const flexJustify = 'author' && 'date' ? "justify" : 'author' ? "start" : "end";
            %>
            <% if ('author' || 'date') { %>
              <div class="card-attribution card-text-small <%-flexJustify%>">
                <% if ('author') { %><div class="listing-author"><%= item.author %></div><% } %>
              </div>
            <% } %>
            <style>
              .listing-categories .listing-category .listing-href {
                color: inherit; /* blue colors for links too */
                text-decoration: none; /* Remove underline */
              }
            </style>
            <div class="listing-categories" style="padding-top: 1em;">
              <% if ('slides') { %>
                <div class="listing-category">
                  <% if (item.slides.url) { %>
                    <a class="listing-href" href="<%= item.slides.url %>" target="_blank" rel="noopener">
                      <% if (item.slides.text) { %>
                        <%= item.slides.text %>
                      <% } else { %>
                        Slides
                      <% } %>
                    </a>
                  <% } else { %>
                    <a class="listing-href" href="<%= item.code %>" target="_blank" rel="noopener">Slides</a>
                  <% } %>
                </div>
              <% } %>
            </div>
          </div>
        <% } %>

        <!-- <div class="card-footer">
            <div class="card-filename listing-filename">
              <%= item.filename ? item.filename : "&nbsp;" %>
            </div>
            <div class="card-file-modified listing-file-modified">
              <%= item['file-modified'] ? item['file-modified'] : "&nbsp;"%>
            </div>
        </div> -->

      </div>
    </a> <!-- Added link wrapper -->
  </div>
<% } %>
</div>

```