/* Padding and alignment */
#content .figure-wrap .figure-wrap-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* Base 6-column grid */
  gap: 10px;
  justify-items: center; /* Center items horizontally within their grid cells */
  border: none;
  margin:10px
}

#content .figure-wrap .figure-wrap-grid img {
    padding: 0px;
    margin: 0px;
		max-width: 100%; /* AB - 2025-05-29 - added just in case the images are quite large */
}


/* Placeholder */
#content .figure-wrap-grid:has(> p.image-placeholder:only-child) {
  grid-template-rows: auto;
}

#content .figure-wrap-grid:has(> p.image-placeholder:only-child) > .image-placeholder {
  grid-column: 3 / span 2;
}

/* Dynamic styling based on the number of images within each .figure-wrap-grid */
/* Default three in a row */
#content .figure-wrap-grid:has(> img:nth-last-child(10)) { grid-template-rows: auto auto auto auto; }
#content .figure-wrap-grid:has(> img:nth-last-child(3n + 1)) > img:nth-child(3n + 1) { grid-column: 1 / span 2; }
#content .figure-wrap-grid:has(> img:nth-last-child(3n + 2)) > img:nth-child(3n + 2) { grid-column: 3 / span 2; }
#content .figure-wrap-grid:has(> img:nth-last-child(3n + 3)) > img:nth-child(3n + 3) { grid-column: 5 / span 2; }


/* 1 Image */
#content .figure-wrap-grid:has(> img:only-child) > img:nth-child(1) { grid-column: 2 / span 4; }

/* 2 Images -- */
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(2)) > img:nth-child(1) { grid-column: 2 / span 2; }
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(2)) > img:nth-child(2) { grid-column: 4 / span 2; }

/* 4 Images -- 2 by 2 centred */
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(4)) { grid-template-rows: auto auto; }
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(4)) > img:nth-child(1) { grid-column: 2 / span 2; }
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(4)) > img:nth-child(2) { grid-column: 4 / span 2; }
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(4)) > img:nth-child(3) { grid-column: 2 / span 2; grid-row: 2; }
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(4)) > img:nth-child(4) { grid-column: 4 / span 2; grid-row: 2; }

/* 5 Images */
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(5)) > img:nth-child(4) { grid-column: 2 / span 2; grid-row: auto; }
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(5)) > img:nth-child(5) { grid-column: 4 / span 2; grid-row: auto; }

/* 7 Images */
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(7)) > img:nth-child(7) { grid-column: 3 / span 2; grid-row: auto; }

/* 8 Images */
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(8)) > img:nth-child(7) { grid-column: 2 / span 2; grid-row: auto; }
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(8)) > img:nth-child(8) { grid-column: 4 / span 2; grid-row: auto; }

/* 10 Images */
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(10)) > img:nth-child(10) { grid-column: 3 / span 2; grid-row: auto; }

/* 11 Images */
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(11)) > img:nth-child(10) { grid-column: 2 / span 2; grid-row: auto; }
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(11)) > img:nth-child(11) { grid-column: 4 / span 2; grid-row: auto; }

/* 13 Images */
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(13)) > img:nth-child(13) { grid-column: 3 / span 2; grid-row: auto; }

/* 14 Images */
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(14)) > img:nth-child(13) { grid-column: 2 / span 2; grid-row: auto; }
#content .figure-wrap-grid:has(> img:nth-child(1):nth-last-child(14)) > img:nth-child(14) { grid-column: 4 / span 2; grid-row: auto; }


/* Responsive breakpoints (adjust as needed) */
@media (max-width: 960px) {
  #content .figure-wrap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #content .figure-wrap-grid > img {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  #content .figure-wrap .figure-wrap-grid img {
    padding: 0px 10px;
  }
}

@media (max-width: 680px) {
  #content .figure-wrap-grid {
    grid-template-columns: 1fr;
  }
}