/* Undo some styling from post – this should not overlap, but I'm being lazy and reusing the post layout for albums too. */
.post-body { max-inline-size: revert; }
.post-body .figure { margin: 0; padding: 0; }

.gallery-controls {
  --blur-radius: 10px;

  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--size-5px);
  background-color: var(--color-bg);
  background-color: color-mix(in srgb, var(--color-bg), transparent 25%);
  -webkit-backdrop-filter: blur(var(--blur-radius));
  backdrop-filter: blur(var(--blur-radius));
  position: sticky;
  top: var(--space-s);
  display: inline-block;
}

.gallery {
  --gallery-scaling-factor: 20;
  --gallery-img-border: 10px;

  /* Match the padding with the margin on the body so the content aligns vertically. */
  margin-inline: calc(-1 * var(--body-inline));
  margin-block-end: var(--space-xl);
  background-color: var(--color-bg-negative);
}

.gallery-items {
  padding-inline: var(--body-inline);
  padding-block-start: calc(2 * var(--space-m));
  padding-block-end: calc(12 * var(--space-m));
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--space-m);
}

@media screen and (min-width: 75rem) {
  .gallery-items {
    padding-inline: calc(var(--body-inline) * 3/5);
    justify-content: start;
  }
}

.gallery-items img {
  border: var(--gallery-img-border) solid white;
}

@media (prefers-color-scheme: dark) {
  .gallery {
    border-block: var(--size-1px) solid var(--color-fg-weaker);
  }
}

@media (prefers-color-scheme: light) {
  /* Apply an inset shadow in light mode to the gallery area as it's invisible
   * in dark mode. Offset it to only appear on the top and bottom of the
   * container edges as if the gallery area is slightly depressed about the
   * z-axis. */
  .gallery {
    box-shadow:
      inset 0px 10px 8px -10px #cccccc,
      inset 0px -10px 8px -10px #cccccc;
  }

  /* Apply a shadow to the photos in light mode to the gallery photos as it's
   * invisible in dark mode. */
  .gallery-items img {
    box-shadow: var(--box-shadow-medium-elevation);
  }
}