/* Pixel-art images need nearest-neighbor scaling so the grid stays crisp. */
.md-content img[src*="examples/"] {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Tighter hero banner on the home page. */
.hero-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0 1rem;
  text-align: center;
}

.hero-banner img {
  max-width: 420px;
  width: 100%;
  border-radius: 6px;
}

/* Cookbook "recipe" card spacing. */
.recipe-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.recipe-preview figure {
  margin: 0;
  text-align: center;
}

.recipe-preview figcaption {
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
  margin-top: 0.25rem;
}

/* Gallery grid for multi-sprite showcase on home page. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.gallery-grid figure {
  margin: 0;
  text-align: center;
}

.gallery-grid img {
  width: 100%;
  border-radius: 4px;
  background: var(--md-code-bg-color);
  padding: 0.5rem;
}