/* 作品照片牆比較版：照片群組靠近中央聚合區，較大的留白只出現在外側。 */
.project-gallery.mosaic-gallery {
  --mosaic-gap: 14px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  gap: var(--mosaic-gap);
  padding-inline: clamp(16px, 2.4vw, 48px);
}

.project-gallery.mosaic-gallery:is([data-layout-mode="fixed"], [data-layout-mode="sequence"]) {
  padding-inline: clamp(12px, 1.5vw, 28px);
}

.mosaic-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  gap: var(--mosaic-gap);
  padding-left: var(--row-offset, 0px);
  box-sizing: border-box;
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
}

.mosaic-row.is-reversed figure:first-child {
  order: 2;
}

.mosaic-row.is-reversed figure:last-child {
  order: 1;
}

.mosaic-row figure {
  flex: 0 0 auto;
  width: calc(var(--ratio) * var(--row-height));
  height: var(--row-height);
  min-width: 0;
  margin: 0;
}

.mosaic-row img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 620px) {
  .project-gallery.mosaic-gallery {
    --mosaic-gap: 8px;
    padding-inline: 8px;
  }
}

@media print {
  .mosaic-row {
    content-visibility: visible;
    display: block;
    padding-left: 0 !important;
  }
  .mosaic-row figure {
    width: 100%;
    height: auto;
    margin-bottom: 12px;
  }
  .mosaic-row img {
    height: auto;
  }
}