/* Keep the subject visible in cropped previews. Full photo views keep native proportions. */
.intro-image img { object-position: 50% 35%; }
.card-photo img, .finder-result-image img { object-position: var(--photo-focus, 50% 50%); }
img[src$="/tacos.webp"] { --photo-focus: 50% 52%; }
img[src$="/tio-sam-04.webp"] { --photo-focus: 50% 58%; }
img[src$="/desayunos-30-y-28-02.webp"] { --photo-focus: 50% 62%; }
img[src$="/torta-stand-01.webp"] { --photo-focus: 50% 55%; }
img[src$="/nativo-marinero-03.webp"] { --photo-focus: 50% 61%; }

/* The main photograph sets the grid's height, instead of a fixed portrait crop. */
.hero-photos {
  height: auto;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-right: 0;
}
.hero-main { grid-row: 1 / 3; min-height: 0; }
.hero-main img { display: block; width: 100%; height: auto; }
.hero-main:hover img { transform: none; }
.hero-small { display: block; position: relative; min-height: 0; }
.hero-small img { position: absolute; inset: 0; }
.hero-small img[src$="/nativo-marinero-08.webp"] { object-position: 50% 100%; }
.hero-photos-landscape {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
}
.hero-photos-landscape .hero-main { grid-column: 1 / -1; grid-row: 1; }
.hero-photos-landscape .hero-small { grid-row: 2; aspect-ratio: 4 / 3; }
.photo-document { background: var(--paper); }
.photo-document img { object-fit: contain; object-position: center; }
.photo-document:hover img { transform: none; }

/* Documentary photographs and captions stay complete at every column width. */
.photo-grid { display: block; columns: 3; column-gap: 22px; }
.photo-grid figure { break-inside: avoid; margin: 0 0 24px; }
.photo-grid .photo-button { height: auto; }
.photo-grid .photo-button img { display: block; width: 100%; height: auto; }
.photo-grid .photo-button:hover img { transform: none; }
.image-ribbon .photo-button { height: auto; }
.image-ribbon .photo-button img { display: block; height: auto; }
.image-ribbon .photo-button:hover img { transform: none; }
.image-ribbon button > span { position: static; display: block; padding: 12px 14px; background: var(--forest); }

@media (min-width: 741px) {
  .place-card { grid-template-columns: 32% minmax(0, 1fr) 135px; }
}
@media (min-width: 1051px) {
  .place-card { grid-template-columns: 32% minmax(0, 1fr) 170px; }
}
@media (max-width: 1050px) {
  .photo-grid { columns: 2; column-gap: 18px; }
}
@media (max-width: 740px) {
  .hero-photos { gap: 6px; }
  .photo-grid { column-gap: 12px; }
}
@media (max-width: 420px) {
  .photo-grid { columns: 1; }
}