/*!
 * portfolio-layout — the four portfolio categories on one line.
 *
 * Written after the Tailwind build, so it uses plain CSS rather than utility classes: adding
 * `lg:basis-[46%]` to the template does nothing, because app.css only contains the utilities the
 * theme used when it was compiled.
 *
 * Measured: the chips need 472px in total (61 + 124 + 130 + 133, plus 3 x 8px of gap). The left
 * column must therefore be at least that wide, which happens from about 1200px of viewport. Below
 * that the row keeps wrapping, which is the honest fallback rather than a clipped chip.
 */
@media (min-width: 1200px) {
  #tocs-portfolio-head {
    flex-basis: 46%;
  }

  #tocs-portfolio-lede {
    flex-basis: 54%;
  }

  /* One line, and the chips keep their natural width instead of being squeezed by the flex row. */
  .portfolio-type {
    flex-wrap: nowrap;
  }

  .portfolio-type > div {
    flex: 0 0 auto;
  }
}