Display card image when present

app/assets/stylesheets/events.css

@@ -140,11 +140,22 @@
     min-inline-size: 0;
     overflow: clip;
     position: relative;
+    z-index: 0;
 
     @media (max-width: 639px) {
       --panel-size: 100%;
     }
 
+    &:has(.card__background img:not([src=""])) {
+      background-color: var(--color-canvas) !important;
+    }
+
+    .card__background {
+      filter: brightness(1.2) contrast(0.8);
+      opacity: 0.2;
+      z-index: 0;
+    }
+
     .card__collection {
       background-color: transparent;
       color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
@@ -194,6 +205,11 @@
     opacity: 0.66;
   }
 
+  .event__content {
+    position: relative;
+    z-index: 1;
+  }
+
   .event__grid-item {
     background-color: var(--color-canvas);
     block-size: 100%;

app/views/events/event/_layout.html.erb

@@ -5,7 +5,7 @@
       data: { related_element_target: "related",
             related_element_group_value: card.id,
             action: "mouseover->related-element#highlight mouseout->related-element#unhighlight" } do %>
-  <div class="flex flex-column">
+  <div class="event__content flex flex-column">
     <div class="flex align-start gap">
       <div class="card__collection flex-inline align-start">
         <span class="card__id"><%= card.id %></span>
@@ -35,4 +35,10 @@
       </div>
     </div>
   </div>
+
+  <% if event.card.image.present? %>
+    <div class="card__background">
+      <%= image_tag event.card.image.presence || "", size: 120, aria: { hidden: true } %>
+    </div>
+  <% end %>
 <% end %>