/* Screenshots: each page, large, with what it shows; phones side by side. */
.gallery { padding: 4rem var(--page-pad) 6rem; }
.gallery-head { max-width: 44rem; }
.gallery-head h1 { margin: 0; font-size: 3rem; font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
/* Its opening line, under the title (as the docs' pages once had it). */
.docs-lede { margin: 1.25rem 0 2.5rem; font: 400 1.25rem/1.6 var(--al-font-serif); color: var(--al-color-text-muted); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 3rem; margin-top: 3.5rem; }
.shot-fig { margin: 0; scroll-margin-top: 1rem; }
.shot-fig.phone picture { display: block; border: 1px solid var(--al-color-line-strong); border-radius: var(--al-radius-sm); background: var(--al-color-surface); overflow: hidden; }
.shot-fig img { display: block; width: 100%; height: auto; }
.shot-fig.phone { max-width: 22rem; }
.shot-fig figcaption { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.shot-fig figcaption a { color: var(--al-color-text); font-size: 1.125rem; font-weight: 500; text-decoration: none; }
.shot-fig figcaption a:hover { color: var(--al-color-accent); }
.shot-fig figcaption span { font: 400 1rem/1.6 var(--al-font-serif); color: var(--al-color-text-muted); }
@media (max-width: 64rem) {
  .gallery { padding-block: 3rem 4rem; }
  .gallery-grid { grid-template-columns: 1fr; gap: 3rem; }
  .gallery-head h1 { font-size: 2.25rem; }
}