/*
 * Galerías de fotos de los eventos.
 *
 * Webflow las armó como un grid de dos columnas, y en un grid todas las celdas
 * de una fila miden lo que la más alta: al lado de una foto vertical de 892 px,
 * una horizontal de 309 dejaba casi 600 px de blanco debajo. Con setenta o cien
 * fotos por evento la página se llenaba de huecos — en el Business Trip eran
 * 1765 px de blanco de más.
 *
 * Con `columns` las fotos se apilan sin dejar hueco, que es lo que se espera de
 * una galería. Se conservan las dos columnas y la separación de 16 px del
 * diseño original: lo único que cambia es que ya no sobra blanco.
 *
 * Aplica a las siete galerías que usan `.grid` (los dos get togethers, brindis,
 * bootcamp, sesión live y business trip). El Hike usa otras clases y va aparte.
 *
 * El `body` de más no es decorativo: algunas de estas páginas traen su propio
 * `<style>` con `.w-layout-grid.grid > .image-wrapper { margin:0 }`, que empata
 * en especificidad. Sin el `body` delante, las fotos se quedaban pegadas sin
 * separación vertical.
 */
body .w-layout-grid.grid {
  display: block;
  column-count: 2;
  column-gap: 16px;
}

/* una foto no se parte entre dos columnas */
body .w-layout-grid.grid > *,
body .w-layout-grid.grid > .image-wrapper,
body .w-layout-grid.grid > img {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

body .w-layout-grid.grid > * > img {
  display: block;
  width: 100%;
  height: auto;
}

/* en móvil, una sola columna — como ya hacía el grid original */
@media (max-width: 767px) {
  body .w-layout-grid.grid {
    column-count: 1;
  }
}