/* A code component's Shadow DOM doesn't inherit the prototype's global box-sizing reset. */
.ps_cZIOaeMzXS8lfaQKB,
.ps_cZIOaeMzXS8lfaQKB *,
.ps_cZIOaeMzXS8lfaQKB *::before,
.ps_cZIOaeMzXS8lfaQKB *::after {
  box-sizing: border-box;
}

/* A block in the Rich Text's flow, with room above and below like a figure (the host is otherwise inline). */
:host {
  display: block;
  margin-block: max(32px, 2.78vw);
}

/* The width the group is given decides the columns, so it reads the same in any column. */
.ps_cZIOaeMzXS8lfaQKB {
  container-type: inline-size;
}

/* Cards in a row are level; the gap is the Stat Card grid's on the page. */
.Hj6XK8LHqyHfeahQPXaq {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  gap: max(16px, 1.39vw);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.Hj6XK8LHqyHfeahQPXaq[data-columns='1'] {
  --columns: 1;
}

.Hj6XK8LHqyHfeahQPXaq[data-columns='2'] {
  --columns: 2;
}

.Hj6XK8LHqyHfeahQPXaq[data-columns='3'] {
  --columns: 3;
}

.BlfDO00lEmXTRaddCD1f {
  margin: 0;
  padding: 0;
}

/*
 * The figures are large and don't wrap, so three across needs about 760px of column and two about
 * 520px; below that the cards stack (never two plus one left alone).
 */
@container (max-width: 760px) {
  .Hj6XK8LHqyHfeahQPXaq[data-columns='3'] {
    --columns: 1;
  }
}

@container (max-width: 520px) {
  .Hj6XK8LHqyHfeahQPXaq[data-columns='2'] {
    --columns: 1;
  }
}