/* Horizontal-order masonry shared by home previews and archive pages. */
.work-grid,
.work-grid--preview.work-grid--photography,
.work-grid--preview.work-grid--design {
  --work-columns: 3;
  --work-column-gap: 22px;
  --work-row-gap: 22px;
  --work-row-unit: 8px;
  display: grid;
  grid-template-columns: repeat(var(--work-columns), minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: var(--work-row-unit);
  column-gap: var(--work-column-gap);
  row-gap: 0;
  align-items: start;
  padding-top: 22px;
}

#design-preview,
#design-archive {
  --work-columns: 2;
}

.work-card,
.work-grid--preview.work-grid--photography .work-card,
.work-grid--preview.work-grid--design .work-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  display: block;
  grid-column: auto;
  align-self: start;
  grid-row-end: span var(--masonry-span, 1);
}

.work-grid .work-image img,
.work-grid .crop-portrait .work-image img,
.work-grid .crop-square .work-image img,
.work-grid--preview.work-grid--photography .work-image img,
.work-grid--preview.work-grid--design .work-image img {
  width: 100%;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

@media (max-width: 820px) {
  .work-grid,
  .work-grid--preview.work-grid--photography,
  .work-grid--preview.work-grid--design {
    --work-column-gap: 18px;
    --work-row-gap: 18px;
    padding-top: 16px;
  }
}

@media (max-width: 460px) {
  .work-grid,
  .work-grid--preview.work-grid--photography,
  .work-grid--preview.work-grid--design {
    --work-column-gap: 12px;
    --work-row-gap: 12px;
  }
}