.column-layout--triple {
  --col-layout-col-gap: 40px;
  --col-layout-row-gap: 40px;
  --col-width-1: 100%;
  --col-width-2: 100%;
  --col-width-3: 100%;
  container: column/inline-size;
  @media (width > 50rem) {
    --col-width-1: calc((100% - var(--col-layout-col-gap, 0px) * 2) / 3);
    --col-width-2: calc((100% - var(--col-layout-col-gap, 0px) * 2) / 3);
    --col-width-3: calc((100% - var(--col-layout-col-gap, 0px) * 2) / 3);
  }
}

.column-layout--triple .col:nth-of-type(1) {
  flex-grow: 1;
  flex-basis: var(--col-width-1, 100%);
}
.column-layout--triple .col:nth-of-type(2) {
  flex-grow: 1;
  flex-basis: var(--col-width-2, 100%);
}
.column-layout--triple .col:nth-of-type(3) {
  flex-grow: 1;
  flex-basis: var(--col-width-3, 100%);
}