:where(*):has(> .field-row) {
  container-name: field-row;
  container-type: inline-size;
}

/* a twelve column field row */
:where(.field-row) {
  /*  container-name: field-row;
  container-type: inline-size; */

  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: stretch;
  margin-block-start: 0;
  gap: 0.75rem;

  /* &.indented {
    margin-inline-start: 2lh;
    width: calc(100% - 2lh);
  }

  &.inline {
    margin-block-start: 0;
  }

  &.separator {
    padding-block-start: 2lh;
    border-top: 1px solid var(--gray-text);
  }

  &.top-aligned {
    align-items: start;
  } */

  &>.field,
  &>fieldset {
    margin-block-start: 0.5rem;
    &.one.wide {
      flex-basis: calc((1 / 12 * 100%) - 0.75rem);
      min-width: 4lh;
      max-width: 100%;
      flex-grow: 1;
    }

    &.two.wide {
      flex-basis: calc((2 / 12 * 100%) - 0.75rem);
      min-width: 6lh;
      max-width: 100%;
      flex-grow: 1;
    }

    &.three.wide {
      flex-basis: calc((3 / 12 * 100%) - 0.75rem);
      min-width: 8lh;
      max-width: 100%;
      flex-grow: 1;
    }

    &.four.wide {
      flex-basis: calc((4 / 12 * 100%) - 0.75rem);
      min-width: 10lh;
      max-width: 100%;
      flex-grow: 1;
    }

    &.five.wide {
      flex-basis: calc((5 / 12 * 100%) - 0.75rem);
      min-width: 12lh;
      max-width: 100%;
      flex-grow: 1;
    }

    &.six.wide {
      flex-basis: calc((6 / 12 * 100%) - 0.75rem);
      min-width: 300px;
      max-width: 100%;
      flex-grow: 1;
    }

    &.seven.wide {
      flex-basis: calc((7 / 12 * 100%) - 0.75rem);
      min-width: 300px;
      max-width: 100%;
      flex-grow: 1;
    }

    &.eight.wide {
      flex-basis: calc((8 / 12 * 100%) - 0.75rem);
      min-width: 300px;
      max-width: 100%;
      flex-grow: 1;
    }

    &.nine.wide {
      flex-basis: calc((9 / 12 * 100%) - 0.75rem);
      min-width: 300px;
      max-width: 100%;
      flex-grow: 1;
    }

    &.ten.wide {
      flex-basis: calc((10 / 12 * 100%) - 0.75rem);
      min-width: 300px;
      max-width: 100%;
      flex-grow: 1;
    }

    &.eleven.wide {
      flex-basis: calc((11 / 12 * 100%) - 0.75rem);
      min-width: 300px;
      max-width: 100%;
      flex-grow: 1;
    }

    &.twelve.wide {
      flex-basis: calc((12 / 12 * 100%) - 0.75rem);
      min-width: 300px;
      max-width: 100%;
      flex-grow: 1;
    }

    input,
    textarea,
    select {
      min-inline-size: unset;
    }

    input:not([type~="checkbox, radio, button, submit, reset"]),
    textarea,
    .select,
    select {
      width: 100%;
    }
  }
}

/* @container field-row (max-width: 320px) {
  .field-row {
    display: block;

    & > .field,
    & > fieldset {
      margin-inline: 0 !important;
      width: 100%  !important;
   }
  }
} */