Add a badge to the photo list items that have multiple photos in them

assets/styles/photos.css

@@ -1,6 +1,8 @@
 :root {
     --date-item-background-color: rgb(var(--lt-gray));
 
+    --photo-grid-item-size: 200px;
+
     --photo-params-background-color: rgb(var(--lt-gray));
     --photo-params-container-background-color: rgb(var(--super-lt-gray));
     --photo-params-color: rgb(var(--sub-dk-gray));
@@ -28,7 +30,7 @@
 
 .photos.list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(var(--photo-grid-item-size), 1fr));
     gap: 4px;
 }
 
@@ -36,6 +38,10 @@
     margin-block-end: 0;
 }
 
+.photos.list > :has(img) {
+    aspect-ratio: 1;
+}
+
 .photos.page > nav {
     margin-block-end: var(--body-item-spacing);
 }
@@ -43,11 +49,37 @@
 .photos.list > a {
     display: block;
     line-height: 0;
+    position: relative;
+}
+.photos.list > a:hover {
+    text-decoration: none;
 }
 
 .photos.list > a > img {
     border-radius: 3px;
     image-orientation: from-image;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.photos.list > a > .badge {
+    align-items: center;
+    aspect-ratio: 1;
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 4px;
+    color: rgb(var(--mid-gray));
+    display: flex;
+    left: 4px;
+    line-height: 0;
+    padding: 1rem;
+    position: relative;
+    top: 4px;
+    width: max-content;
+    z-index: 1;
+}
+.photos.list > a > .badge:hover {
+    text-decoration: none;
 }
 
 .photos.list > div {
@@ -82,7 +114,7 @@
     content: "⏵︎";
     font-size: 80%;
 }
-@media (max-width: calc(24px + 400px + 4px)) {
+@media (max-width: calc(24px + 400px + 9px)) {
     .photos.list > div > h6 > span {
         width: max-content;
         padding-block: calc(0.25 * var(--body-item-spacing));

layouts/photos/li_thumbnail_in_grid.html

@@ -1,6 +1,11 @@
 {{- $thumbnail := partial "photos/thumbnail.html" (dict "Page" . "Width" 600 "Height" 600) -}}
 {{- $thumbnail = $thumbnail.Crop "600x600" -}}
 {{- $altText := $thumbnail.Params.alt -}}
+{{- $numberOfImages := len (partial "photos/list.html" .) -}}
+{{- $hasMultipleImages := gt $numberOfImages 1 -}}
 <a href="{{ .RelPermalink }}" title="{{ .Title }}">
+  {{ if $hasMultipleImages }}
+  <div class="badge">{{ $numberOfImages }}</div> 
+  {{ end }}
   <img src="{{ $thumbnail.RelPermalink }}"{{ with $altText }} alt="{{ . }}"{{ end }}>
 </a>