/* Screenshot galleries used only by the card design article. */
.card-design-image-note {
  color: var(--txS);
  font: 13px/1.6 var(--font);
  margin: 0 0 28px;
}
.card-design-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px 20px;
  margin: 24px 0 32px;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--brd);
  border-radius: 16px;
  background: var(--gr50);
}
.card-design-shot {
  flex: 0 1 260px;
  min-width: 0;
  margin: 0;
}
.card-design-shot img {
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(16, 24, 21, .1);
  display: block;
  width: 100%;
  height: auto;
}
.card-design-shot figcaption {
  margin-top: 14px;
  color: var(--txS);
  font: 13px/1.6 var(--font);
  text-align: center;
}

/* Preserve the previous guide in a native, keyboard-accessible disclosure. */
.card-design-legacy {
  margin: 48px 0;
  border: 1px solid var(--brd);
  border-radius: 16px;
  overflow: hidden;
}
.card-design-legacy > summary {
  padding: 20px 24px;
  color: var(--tx);
  background: var(--gr50);
  font: 700 16px/1.5 var(--font);
  cursor: pointer;
}
.card-design-legacy > summary:focus-visible {
  outline: 3px solid var(--gr);
  outline-offset: -4px;
}
.card-design-legacy-content {
  padding: clamp(16px, 3vw, 28px);
  border-top: 1px solid var(--brd);
}
.card-design-legacy-content > .help-section:last-child {
  margin-bottom: 0;
}