bootstrap 5: embed accordion in grid layout?

Question

Versions:

Vue: 3.0.0
Bootstrap: 5.0.0-beta3

Can a bootstrap accordion be embedded in a grid layout?

Parent form uses container row g-3 layout, and that works.

But then I try to group form elements into separate accordion items. That is, I use one of the the bootstrap accordion examples to partition my form elements -- ie, with one accordion-item containing some form elements, another accordion-item containing others, and so on.

Well, all the form elements are grouped as expected under each respective accordion item, but they lose the grid-formatting.

Original FORM:

<form class="position-relative container border border-1 rounded row p-3 g-3" novalidate>
  <legend>Client</legend>
  <div class="col-12 fs-4 fw-bold">Client details</div>
  <div class="mb-3 col-4">
    <label for="first_name" class="form-label">First name</label>
    <input type="text" class="form-control" id="first_name" v-model="clientProps.firstName" />
  </div>
  <div class="mb-3 col-4">
    <label for="middle_name" class="form-label">Middle name</label>
    <input type="text" class="form-control" id="middle_name" v-model="clientProps.middleName" />
  </div>
  <div class="mb-3 col-4">
    <label for="last_name" class="form-label">Last name</label>
    <input type="text" class="form-control" id="last_name" v-model="clientProps.lastName" />
  </div>
  <div class="mb-3 col-4">
    <label for="gender" class="form-label">Gender</label>
    <select class="form-select" aria-label="Gender" v-model="clientProps.gender">
      <option selected="selected">Choose one...</option>
      <option value="M">Male</option>
      <option value="F">Female</option>
      <option value="N">Neutral</option>
      <option value="U">Unknown</option>
    </select>
  </div>
  <div class="mb-3 col-3">
    <label for="birthdate" class="form-label">Birth Date</label>
    <input type="date" class="form-control" id="birthdate" v-model="clientProps.birthdate" min="1900-01-01" max="2199-12-31"/>
  </div>
  <div class="mb-3 col-5">
    <label for="passport_no" class="form-label">Passport No.</label>
    <input type="text" class="form-control" @keydown="allowNumbersOnly" id="passport_no" v-model="clientProps.passportNo" />
  </div>
  <div class="col-12 fs-4 fw-bold">Contribution details</div>
  <div class="me-5 mb-3 col-12">
    <label for="collection_time" class="form-label">Time of Collection</label>
    <div class="row-col input-group" id="collection_time">
      <div class="me-2 col-auto">
        <input type="date" class="form-control" id="collection_time_date" min="1900-01-01" max="2199-12-31" v-model="clientProps.collectionDate" />
      </div>
      <div class="me-2 col-auto">
        <input type="time" min="00:00:00" max="23:59:59" step="1" class="form-control pe-1" id="collection_time_hour" v-model="clientProps.collectionTime" />
      </div>
      <div class="col-auto">
        <select class="form-select" aria-label="Time Zone" id="collection_time_timezone" v-model="clientProps.collectionTimezone">
          <option v-for="tz in this.$options.timezones" :key="tz" :selected="tz == 'America/Los_Angeles'">{{ tz }}</option>
        </select>
      </div>
    </div>
  </div>
  <div class="me-5 mb-3 col-12">
    <label for="receipt_time" class="form-label">Time of Receipt</label>
    <div class="row-col input-group" id="receipt_time">
      <div class="me-2 col-auto">
        <input type="date" class="form-control" id="receipt_time_date" min="1900-01-01" max="2199-12-31" v-model="clientProps.receiptDate" />
      </div>
      <div class="me-2 col-auto">
        <input type="time" min="00:00:00" max="23:59:59" step="1" class="form-control pe-1" id="receipt_time_hour" v-model="clientProps.receiptTime" />
      </div>
      <div class="col-auto">
        <select class="form-select" aria-label="Time Zone" id="receipt_time_timezone" v-model="clientProps.receiptTimezone">
          <option v-for="tz in this.$options.timezones" :key="tz" :selected="tz == 'America/Los_Angeles'">{{ tz }}</option>
        </select>
      </div>
    </div>
  </div>
  <div class="mb-3 col-12">
    <label for="coordinatorName" class="form-label">Name of Coordinator</label>
    <input type="text" class="form-control" id="coordinatorName" v-model="clientProps.coordinatorName" readonly="true"/>
  </div>
  <div class="col-12 fs-4 fw-bold">Address details</div>
  <div class="mb-3 col-4">
    <label for="streetAddress" class="form-label">Street address</label>
    <input type="text" class="form-control" id="streetAddress" v-model="clientProps.streetAddress"/>
  </div>
  <div class="mb-3 col-4">
    <label for="city" class="form-label">City</label>
    <input type="text" class="form-control" id="city" v-model="clientProps.city"/>
  </div>
  <div class="mb-3 col-1">
    <label for="state" class="form-label">State</label>
    <input type="text" class="form-control" id="state" v-model="clientProps.state"/>
  </div>
  <div class="mb-3 col-3">
    <label for="zipCode" class="form-label">Zip code</label>
    <input type="text" class="form-control" id="zipCode" v-model="clientProps.zipCode"/>
  </div>
</form>

The question then is how to retool this FORM so that Client details, Contribution details, and Address details comprise a bootstrap accordion -- but while maintaining the grid layout of the original FORM elements.