@layer components {

  /* The enlarged image over the whole screen. `display` is set only under
     `[open]` — otherwise a closed `<dialog>` would override the UA's
     `display: none` and stay visible. */
  .lightbox {
    background: none;
    block-size: 100dvh;
    border: none;
    inline-size: 100dvw;
    max-block-size: 100dvh;
    max-inline-size: 100dvw;
    padding: 0;
  }

  .lightbox[open] {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .lightbox::backdrop {
    background: oklch(from var(--color-shadow) l c h / 88%);
  }

  .lightbox__image {
    block-size: auto;
    border-radius: var(--radius-sm);
    inline-size: auto;
    max-block-size: calc(100dvh - 5rem);
    max-inline-size: calc(100dvw - 2rem);
    object-fit: contain;
  }

  .lightbox__close {
    align-items: center;
    background: oklch(from var(--color-ink-inverted) l c h / 14%);
    block-size: 2.75rem;
    border: none;
    border-radius: 50%;
    color: var(--color-ink-inverted);
    cursor: pointer;
    display: flex;
    inline-size: 2.75rem;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    justify-content: center;
    position: fixed;
    transition: background 0.15s;
  }

  .lightbox__close:hover {
    background: oklch(from var(--color-ink-inverted) l c h / 26%);
  }
}