.screenshots-main {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 2 * var(--page-gutter)));
  margin: 0 auto;
  padding: calc(var(--site-header-height, 110px) + 14px) 0 24px;
}

.screenshots-main h1 {
  margin: 0 0 10px;
  color: #1f3027;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: -.01em;
}

.screenshot-gallery {
  display: grid;
  gap: clamp(14px, calc(2vw + 4px), 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.screenshot-card {
  margin: 0;
  border: 1px solid rgb(255 255 244 / 70%);
  border-radius: 18px;
  background: rgb(247 249 235 / 65%);
  box-shadow: 0 12px 40px rgb(31 54 40 / 10%);
}

.screenshot-card a {
  display: block;
  border-radius: 17px 17px 0 0;
  cursor: zoom-in;
}

.screenshot-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.screenshot-card figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.screenshot-number {
  color: #52705f;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .screenshots-main { width: calc(100% - 20px); }
  .screenshot-card { border-radius: 12px; }
  .screenshot-card a { border-radius: 11px 11px 0 0; }
  .screenshot-card figcaption { padding: 12px 14px; }
}