<!-- Icons: Lucide (lucide.dev), ISC licence -->
<style>
.odl-image-card { box-sizing: border-box; inline-size: 100%; max-inline-size: 30rem; margin: 0 auto; container-type: inline-size; overflow: hidden; background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-image-card *, .odl-image-card *::before { box-sizing: border-box; }
.odl-image-card .odl-photo { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ds-color-surface-sunken); }
.odl-image-card figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-stack-sm) var(--ds-space-inline-md); align-items: center; padding: var(--ds-space-inset-lg) var(--ds-space-inset-xl) var(--ds-space-inset-xl); }
.odl-image-card .odl-words { display: grid; gap: var(--ds-space-stack-xs); min-inline-size: 0; }
.odl-image-card .odl-caption { margin: 0; font: var(--ds-text-body-md); overflow-wrap: anywhere; }
.odl-image-card .odl-credit { margin: 0; color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); overflow-wrap: anywhere; }
.odl-image-card button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-inline-sm); max-inline-size: 100%;
  min-block-size: max(var(--ds-size-control-md), var(--ds-size-target-min)); padding: var(--ds-space-inset-xs) var(--ds-space-inset-lg); border-radius: var(--ds-radius-control);
  border: var(--ds-border-width-default) solid var(--ds-color-border-default); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary);
  font: var(--ds-text-label-lg); font-weight: var(--ds-font-weight-label); text-align: center; overflow-wrap: anywhere; cursor: pointer;
  transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-image-card button:hover { background: var(--ds-color-bg-neutral-subtle); }
.odl-image-card button svg { flex: none; inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); fill: none; stroke: currentColor; stroke-width: var(--ds-icon-stroke-md); }
.odl-image-card button:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
/* Phone: the button goes under the caption, at full width. */
@container (max-width: 26rem) {
  .odl-image-card figcaption { grid-template-columns: minmax(0, 1fr); padding: var(--ds-space-inset-md) var(--ds-space-inset-lg) var(--ds-space-inset-lg); }
}
/* Disabled or still loading: quiet but readable (AA), never the faint disabled pair. */
.odl-image-card button:disabled { cursor: not-allowed; background: var(--ds-color-bg-neutral-subtle); border-color: var(--ds-color-border-subtle); color: var(--ds-color-text-secondary); }
@media (prefers-reduced-motion: reduce) { .odl-image-card, .odl-image-card *, .odl-image-card *::before { transition: none !important; animation: none !important; } }
</style>
<figure class="odl-image-card">
  <img class="odl-photo" data-od-media="image" src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=960&amp;h=640&amp;fit=crop&amp;auto=format&amp;q=70" alt="Restaurant dining room in daylight" width="960" height="640" loading="lazy" decoding="async">
  <figcaption>
    <div class="odl-words">
      <p class="odl-caption" data-od-slot="caption">The dining room at Casa Verbena, set for Sunday lunch. Window tables go first.</p>
      <p class="odl-credit" data-od-slot="credit" data-od-optional>Photo: Jason Leung on Unsplash</p>
    </div>
    <button type="button" data-od-action="open"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg><span data-od-slot="label">View larger</span></button>
  </figcaption>
</figure>