.photo-grid-scroll {
  max-height: calc((200px + 18px) * 2 + 16px);
  overflow-y: auto;
  padding-right: 6px;
}

.photo-cover {
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  max-width: 200px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  width: 100%;
}

.photo-cover-selected {
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  outline: 3px solid var(--mud-palette-primary);
  transform: translateY(-2px);
}

.photo-cover:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  transform: translateY(-5px);
}

.photo-cover-img {
  aspect-ratio: 1 / 1;
  background-color: #f3f3f3;
  width: 100%;
}

.photo-cover-fn {
  background: var(--mud-palette-background);
  font-size: .75rem;
  padding: 4px 6px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-cover-selected .photo-cover-fn {
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
}