.project-screens { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.project-screen-button { border: 1px solid var(--line); border-radius: 4px; padding: 4px 9px; color: var(--muted); font-size: 10px; }
.project-screen-button:hover { color: var(--ink); background: var(--surface); }
.project-screen-button[aria-pressed="true"] { color: var(--blue); border-color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, transparent); }
#projectImageLink { display: block; cursor: zoom-in; }
#projectImageLink[data-format="phone"] { width: min(360px, 100%); margin-inline: auto; }
#projectImageLink[data-format="phone"] img,
#projectImageLink[data-format="window"] img { width: 100%; height: auto; max-height: none; object-fit: contain; }
#projectImageLink[data-format="phone"] img { border-radius: 14px; box-shadow: 0 6px 24px #0000000d; }
/* Keep five overlapping project prints inside the page on narrow screens. */
.photo { flex-basis: calc((100% + 48px) / 5); }
.photo img { width: 100%; }
@media (max-width: 560px) {
  .photo { flex-basis: calc((100% + 24px) / 5); }
}