/* choice — the options, stacked.
 *
 * One column, always. Two columns fit on a phone only by making each option
 * narrower than the words inside it, and a wrapped option is harder to read
 * than a scrolled list. The exception is a set of picture options, which are
 * looked at rather than read.
 */

.ba-choice {
  display: flex;
  flex-direction: column;
  gap: var(--bt-s2);
}

.ba-choice__how {
  margin: 0 0 var(--bt-s2);
  font-size: var(--bt-fs-small);
  font-weight: 700;
  color: var(--bt-ink-soft);
}

/* Pictures read as a board rather than a list, and they are wide enough to
   sit two across even on the narrow case. */
.ba-choice.is-pictures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bt-s3);
}

.ba-choice.is-pictures .ba-opt {
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

.ba-choice.is-pictures .ba-opt__mark {
  align-self: flex-end;
}

.ba-choice.is-pictures .ba-opt img {
  max-width: 100%;
}

/* Wide enough for three across, which is where a four-option board stops
   looking like a grid and starts looking like a row. */
@media (min-width: 40rem) {
  .ba-choice.is-pictures {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}