:root {
  --grid-columns: 3;
  --grid-gap: 2.5rem;
  --grid-compact-gap: 1.25rem;
  --grid-box-width: calc(
    (100% - (var(--grid-columns) - 1) * var(--grid-gap)) /
    var(--grid-columns)
  );
  --grid-box-padding-x: 0rem;
  --grid-box-padding-y: 0rem;
  --grid-box-caption-gap: 0.75rem;
  --grid-picture-aspect-ratio: 1.782;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  max-width: 3200px;
  padding: calc(0.75 * var(--grid-gap)) var(--grid-gap);
  margin: 0 auto;
  box-sizing: border-box;
}
.grid-box {
  display: block;
  width: var(--grid-box-width);
  flex: none;
  padding: var(--grid-box-padding-y) var(--grid-box-padding-x);
  box-sizing: border-box;
}
.grid-box > a {
  display: block;
}
.grid figure {
  margin: 0;
}
.grid-box picture,
.grid-box .picture {
  display: block;
  font-size: 0;
  border: var(--border-width) solid rgb(from var(--color) r g b / 0.3);
  box-sizing: border-box;
}
.grid-box picture:empty,
.grid-box .picture:empty,
.grid-box .picture[data-fixed] {
  padding: 0 0 calc(100% / var(--grid-picture-aspect-ratio));
}
.grid-box picture img,
.grid-box .picture img {
  max-width: 100%;
  height: auto;
}
.grid-box figcaption,
.grid-box .caption {
  display: block;
  text-align: center;
  padding: var(--grid-box-caption-gap) 0 0;
}
@media (width < 3400px) {
  :root {
    --grid-columns: 8;
  }
}
@media (width < 3000px) {
  :root {
    --grid-columns: 7;
  }
}
@media (width < 2600px) {
  :root {
    --grid-columns: 6;
  }
}
@media (width < 2200px) {
  :root {
    --grid-columns: 5;
  }
}
@media (width < 1800px) {
  :root {
    --grid-columns: 4;
  }
}
@media (width < 1400px) {
  :root {
    --grid-columns: 3;
  }
}
@media (width < 1000px) {
  :root {
    --grid-columns: 2;
  }
}
@media (width < 600px) {
  :root {
    --grid-columns: 1;
    --grid-gap: var(--grid-compact-gap);
  }
  .grid {
    padding: var(--grid-gap);
  }
  .grid-box {
    margin: 0.4rem 0;
  }
}