.column-layout--quad {
  flex-wrap: wrap;
  container: column/inline-size;
}

.column-layout--quad .col {
  flex-grow: 1;
  flex-basis: 100%;
  @container column (width > 40rem) {
    flex-basis: calc(50% - var(--col-layout-col-gap, 0px) / 2);
  }
  @container column (width > 48rem) {
    flex-basis: calc(25% - var(--col-layout-col-gap, 0px) * 3);
  }
}