/* Shared responsive masonry system for the four apartment detail galleries. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-flow: dense;
  grid-auto-rows: 210px;
  gap: 14px;
}

.photo-grid.gallery-studio { grid-auto-rows: 220px; }
.photo-grid.gallery-two { grid-auto-rows: 205px; }
.photo-grid.gallery-deluxe { grid-auto-rows: 195px; }
.photo-grid.gallery-family { grid-auto-rows: 200px; }

.photo-grid .photo-card {
  min-width: 0;
  min-height: 0;
}

.photo-grid .photo-card.feature {
  grid-column: span 2;
  grid-row: span 2;
}

.photo-grid .photo-card.wide { grid-column: span 2; }
.photo-grid .photo-card.tall { grid-row: span 2; }

.photo-grid .photo-card img { object-position: center; }

.gallery-count {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 7px 11px;
  border: 1px solid rgba(184,147,74,.3);
  border-radius: 999px;
  color: var(--gold-dark, #9a7a3a);
  background: rgba(184,147,74,.08);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.owner-copy p + p { margin-top: 14px; }

@media (max-width: 900px) {
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: 220px !important;
  }
  .photo-grid .photo-card.feature { grid-column: span 2; grid-row: span 2; }
  .photo-grid .photo-card.wide { grid-column: span 2; }
}

@media (max-width: 600px) {
  .photo-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: 240px !important;
  }
  .photo-grid .photo-card.feature,
  .photo-grid .photo-card.wide,
  .photo-grid .photo-card.tall {
    grid-column: auto;
    grid-row: auto;
  }
  .photo-grid .photo-card.feature { min-height: 320px; }
}