/* A gallery ---------------------------------------------------------------- */

/* Its cards are Pics's (pics-hear.css); these are what a gallery has that a
   game's pictures do not — photos rather than pixel art, movies and music,
   the picture at the top, its words, and one thing opened the whole width. */

.gallery-card .cpic img,
.gallery-card .cpic video { image-rendering: auto; width: 100%; height: 100%; object-fit: cover; }
.gallery-note { font-size: 40px; color: var(--look-accent); }

.gallery-hero { padding: 0 16px; }
.gallery-hero img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.gallery-blurb { white-space: pre-wrap; margin: 0; }

.gallery-design { display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--border); }
.gallery-design textarea { width: 100%; }
.gallery-colour { display: flex; align-items: center; gap: 6px; font-size: 13px; }

.gallery-open { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 16px; }
.gallery-big { display: flex; justify-content: center; padding: 0 16px; }
.gallery-big img, .gallery-big video {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--radius-lg);
  background: var(--checker) 0 0 / 16px 16px;
}
.gallery-big.audio audio { width: 100%; max-width: 520px; }
.gallery-fields { display: flex; flex-direction: column; gap: 8px; }
.gallery-fields textarea { width: 100%; }