@layer components {
  /* `:where()` keeps the base at zero specificity, so a component that lays
     a field-set out its own way (the party card, the directory form) wins
     with a plain class selector and no `!important`. */
  :where(.field-set) {
    column-gap: 0.5rem;
    display: grid;
    row-gap: 0.1rem;

    :where(input, select) {
      inline-size: 100%;
    }

    :where(label) {
      font-size: 0.6875rem;
    }

    &:where(.single) {
      grid-template-columns: 1fr;
    }

    &:where(.double) {
      grid-template-columns: 1fr 1fr;
    }

    &:where(.double--left-heavy) {
      grid-template-columns: 2fr 1fr;
    }

    &:where(.triple) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}