@layer pages {
/* /press/: the mark and the screenshots, each with its copyable address. One
   column on a phone; the screenshots two abreast from 900px. */
.press-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.press-grid-marks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.press-item {
  margin: 0;
  display: grid;
  gap: .75rem;
  align-content: start;
}
.press-image {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-2);
}
.press-image img { inline-size: 100%; block-size: auto; }
.press-mark .press-image { max-inline-size: 15rem; padding: 1rem; }
.press-item figcaption { display: grid; gap: .35rem; }
.press-url code { overflow-wrap: anywhere; }
.press-item figcaption a { min-block-size: 44px; display: inline-flex; align-items: center; }

}