/* Container keeps a pleasant rectangle on desktop */
.pg { width: 100%; max-width: 1600px; margin: 0 auto; }
.pg .pg-grid { display: grid; gap: .5rem; width: 100%; height: 100%; }

/* Fixed aspect rectangle on medium+ screens to prevent CLS */
@media (min-width: 700px) {
  .pg { aspect-ratio: 16 / 9; }
}
.pg-item { position: relative; overflow: hidden; border-radius: 12px; }
.pg-item picture {
    display: contents;
}
.pg-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 1 image */
.pg-count-1 .pg-grid { grid-template-columns: 1fr; grid-template-rows: 1fr; }

/* 2 images: two equal columns */
.pg-count-2 .pg-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }

/* 3 images: left spans rows, right is two stacked */
.pg-count-3 .pg-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pg-count-3 .pg-item.pg-span-left { grid-column: 1; grid-row: 1 / span 2; min-height:506px; }
.pg-count-3 .pg-item:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.pg-count-3 .pg-item:nth-of-type(3) { grid-column: 2; grid-row: 2; }

/* 4 images: 2x2 */
.pg-count-4 .pg-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* 5 images: 3 columns, 2 rows; center spans rows */
.pg-count-5 .pg-grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pg-count-5 .pg-item:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.pg-count-5 .pg-item:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.pg-count-5 .pg-item.pg-center-span { grid-column: 2; grid-row: 1 / span 2; min-height:506px; }
.pg-count-5 .pg-item:nth-of-type(4) { grid-column: 3; grid-row: 1; }
.pg-count-5 .pg-item:nth-of-type(5) { grid-column: 3; grid-row: 2; }

/* 6 images: 3x2 */
.pg-count-6 .pg-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }

/* Small screens: stack cleanly, avoid fixed aspect to reduce awkward tall gaps */
@media (max-width: 699.98px) {
  .pg { aspect-ratio: auto; }
  .pg .pg-grid { display: block; }
  .pg .pg-item { margin-bottom: .5rem; }
  /* Give each item a gentle aspect for visual consistency */
  .pg .pg-item { aspect-ratio: 16 / 10; }
}