[data-artgrid-state] { display: none; }
[data-artgrid-state="loading"] {
  display: inherit;
  color: #646464;
  font-size: 2.5em;
  padding: 1em;
  font-family: monospace;
  text-transform: uppercase;
  text-align: center;
}

[data-artgrid-state="loading"]:after {
  content: "...";
}

#artwork button {
  width: 50%;
  display: block;
  margin: 0 auto;
  padding: 1ex;
}

.grid {
  display: grid;
  grid-gap: 1ex;
  grid-template-columns: repeat(auto-fit, minmax(23%, 1fr));
}

ul.grid {
  list-style-type: none;
  padding: 0;
}

.thumbnail { text-align: center; }
.thumbnail:hover { background-color: #eee; }

@media (prefers-color-scheme: dark) {
  .thumbnail:hover {
    background-color: inherit;
    outline: 1px dashed #eee;
  }
}

.thumbnail img {
  width: 100%;

  /* necessary strictly for transparent images (eg: PNG thumbs derived from
   * SVGs), when browser is in dark-mode (with a black background), at which
   * point said images' line-work (black) would be effectively invisible. */
  background-color: white;
}
.thumbnail a {
  width: 100%;
  height: 100%;
  display: block;
}

a:has(.caption) {
  font-size: 0.8em;
  text-decoration: none;
  color: inherit;
  font-family: monospace;
}

.thumbnail .caption {
  border-top: 1px solid #aeaeae;
}

.thumbnail .caption .work-title {
  font-weight: bold;
}

.thumbnail .caption > span {
  display: block;
}