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));