.grid {
  --n: 3;
  --aspect-ratio: 1;
  --grid-item-width: calc((100% - (var(--n) - 1) * var(--grid-gap)) / var(--n));
  --grid-item-content-padding: 0px;
  /* --grid-item-content-padding: 18px; */
  --grid-gap: 6px;
  --grid-item-content-background: transparent;

  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  padding: 0 var(--grid-gap);
}
@media (width < 3400px) {
  .grid {
    --n: 8;
  }
}
@media (width < 3000px) {
  .grid {
    --n: 7;
  }
}
@media (width < 2600px) {
  .grid {
    --n: 6;
  }
}
@media (width < 2200px) {
  .grid {
    --n: 5;
  }
}
@media (width < 1800px) {
  .grid {
    --n: 4;
  }
}
@media (width < 1400px) {
  .grid {
    --n: 3;
  }
}
@media (width < 1000px) {
  .grid {
    --n: 2;
  }
}
@media (width < 600px) {
  .grid {
    --n: 1;
    --grid-gap: 0.75rem;
    padding: 0;
  }
}
.grid > .item {
  width: var(--grid-item-width);
  margin: 0;
  box-sizing: border-box;
  position: relative;
  scroll-margin-top: var(--grid-gap);
}
.grid .item-content {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: var(--grid-item-content-background);
  padding: var(--grid-item-content-padding);
  padding-bottom: calc(
    (100% - 2 * var(--grid-item-content-padding)) /
    var(--aspect-ratio) +
    var(--grid-item-content-padding)
  );
  box-sizing: border-box;
  transition: box-shadow 1s;
  overflow: hidden;
  position: relative;
}
[data-content="images"] .grid .item-content {
  font-size: 0;
}
.grid > .item.hash-target:not(.muted) .item-content {
  box-shadow: 0 0 0rem 0.1rem rgb(from var(--focus-color) r g b / 0.75);
}
html[data-content="images"] .grid .item-content img {
  max-width: calc(100% - 2 * var(--grid-item-content-padding));
  max-height: calc(100% - 2 * var(--grid-item-content-padding));
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.grid .item-caption {
  display: flex;
  font-size: 0.93em;
  gap: 1em;
  padding: 0.5em 1em 1em;
}
.grid .item-caption.empty {
  padding: 0;
}
.grid .item-caption .content {
  flex: auto;
}
.grid .item-caption .description {
  color: var(--emphatic-color);
}
.grid[data-clamp-captions] .item-caption .content {
  flex: auto;
  display: -webkit-box;
  -webkit-line-clamp: var(--max-caption-lines);
  -webkit-box-orient: vertical;
  line-clamp: var(--max-caption-lines);
  overflow: hidden;
}
/* The controls should be placed over the item content to allow for
controls with an absent caption */
.grid .item-caption .controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
  position: absolute;
  inset: 2px 2px auto auto;
}
.grid .item-caption .controls a {
  display: flex;
  align-items: center;
  text-decoration: none;
  border-bottom: none;
  border-radius: 0.2em;
  padding: 0.35em;
  transition:
    background 0.2s,
    color 0.2s;
}
.grid .item-caption .controls a:link,
.grid .item-caption .controls a:visited,
.grid .item-caption .controls a:focus,
.grid .item-caption .controls a:active {
  color: rgb(from var(--base-color) r g b / 0.8);
  background: rgb(from var(--base-color-contrast) r g b / 0.3);
}
.grid .item-caption .controls a:hover {
  color: rgb(from var(--base-color-contrast) r g b / 0.8);
  background: rgb(from var(--base-color) r g b / 0.5);
}
.grid .item-caption .controls a svg {
  height: 0.9em;
  stroke-width: 0.75;
}
@media (width <= 600px) {
  .grid > .item.hash-target:not(.muted) .item-content {
    box-shadow: inset 0 0 0rem 0.1rem rgb(from var(--focus-color) r g b / 0.75);
  }
  .grid .item-caption .controls {
    inset: 4px 4px auto auto;
  }
  .grid .item-caption .controls a svg {
    height: 1.25em;
    stroke-width: 0.5;
  }
}