/**
 * @file
 * Property-map groups (mapLayerCustomRenderer.js buildCustomRowsElement):
 * the groups of a query result laid out in columns whose heading rows line
 * up. Bootstrap's flex row cannot align the second row of sibling columns;
 * a grid with a subgrid can: every group spans one heading row and one body
 * row of the container grid, so all headings on a line share one height and
 * the rows below start level, whether a heading wraps to one line or three.
 * Columns follow the width (one on phones); the spacing is Bootstrap's scale.
 */
.biopama-property-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  column-gap: 1.5rem;
  row-gap: 1rem;
}

.biopama-property-group {
  display: grid;
  grid-template-rows: auto 1fr;
}

@supports (grid-template-rows: subgrid) {
  .biopama-property-group {
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}