/* Small custom layer on top of Bootstrap. Keep this minimal. */

/* Square, cropped thumbnails for the collection grid. */
.thumb {
  aspect-ratio: 1;
  overflow: hidden;
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-empty {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: .85rem;
  background: var(--bs-tertiary-bg);
}

/* Remove button overlaid on a photo preview needs its own backdrop for
   contrast against arbitrary photo content. */
.photo-item .btn-close {
  background-color: rgba(255, 255, 255, .85);
  border-radius: 50%;
  opacity: 1;
}