.project-images {
  grid-column: var(--grid-column-project-images);
  grid-row: var(--grid-row-project-images);
  padding: var(--padding-project-images);
}

.project-images__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--width-gutter);
}

.project-images__image {
  display: flex;
  justify-content: center;
}

/* Responsive image sizing - constrain to viewport */
.project-images__image .image__main,
.project-images__image .image__placeholder {
  max-height: 85vh;
  max-width: 100%;
}

/* Override portrait container queries for project images */
.project-images__image .image--portrait {
  width: auto;
  height: auto;
}

/* Display size: X-Small - 50% width, 2 images in a row */
.project-images__image--xsmall {
  max-width: var(--max-width-project-image-xsmall);
}

/* Display size: Small - 66.6667% width */
.project-images__image--small {
  max-width: var(--max-width-project-image-small);
}

/* Display size: Medium - 100% width, max height = width (square constraint) */
.project-images__image--medium {
  width: 100%;
}

.project-images__image--medium .image__main,
.project-images__image--medium .image__placeholder {
  max-height: min(85vh, 100vw);
}

/* Display size: Large - 100% width, no max height (for portrait images) */
.project-images__image--large {
  width: 100%;
}

.project-images__image--large .image__main,
.project-images__image--large .image__placeholder {
  max-height: none;
}

.project-images__description {
  width: 100%;
  margin-top: calc(var(--width-gutter) * 2);
  padding: var(--padding-project-description);
}

/* Mobile: all images full width */
@media (max-width: 767px) {
  .project-images__image {
    width: 100% !important;
    max-width: none !important;
  }

  .project-images__image .figure,
  .project-images__image .figure__image-container,
  .project-images__image .image {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
  }

  .project-images__image .image__main,
  .project-images__image .image__placeholder {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
  }
}