:root {
  color-scheme: light dark;
  font-family: Roboto, Arial, sans-serif;
}
html,
body,
#map {
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  background: Canvas;
  color: CanvasText;
}
#status:not(:empty) {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  background: Canvas;
  color: CanvasText;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 8px;
  box-sizing: border-box;
  overflow: auto;
  align-content: start;
}
.photo-grid figure {
  margin: 0;
}
.photo-grid button {
  padding: 0;
  border: 3px solid transparent;
  border-radius: 6px;
  background: Canvas;
  width: 100%;
  cursor: pointer;
}
.photo-grid button[aria-pressed='true'] {
  border-color: #0288d1;
}
.photo-grid button:focus-visible {
  outline: 3px solid #0288d1;
  outline-offset: 2px;
}
.photo-grid img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
}
.photo-grid figcaption {
  font: 12px/1.4 Arial, sans-serif;
  color: CanvasText;
  overflow-wrap: anywhere;
}