.column-layout--triple {
  --col-layout-col-gap: 0px;
  --col-layout-row-gap: 0px;
  --col-width-1: 100%;
  --col-width-2: 100%;
  --col-width-3: 100%;
  container: column/inline-size;
}

.column-layout--triple[data-widths="25_50_25"] {
  @media (width > 48rem) {
    --col-width-1: calc(25% - var(--col-layout-col-gap, 0px) / 2);
    --col-width-2: calc(50% - var(--col-layout-col-gap, 0px));
    --col-width-3: calc(25% - var(--col-layout-col-gap, 0px) / 2);
  }
}
.column-layout--triple[data-widths="33_33_33"] {
  @media (width > 48rem) {
    --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[data-widths="25_25_50"] {
  @media (width > 48rem) {
    --col-width-1: calc(25% - var(--col-layout-col-gap, 0px) / 2);
    --col-width-2: calc(25% - var(--col-layout-col-gap, 0px) / 2);
    --col-width-3: calc(50% - var(--col-layout-col-gap, 0px));
  }
}
.column-layout--triple[data-widths="50_25_25"] {
  @media (width > 48rem) {
    --col-width-1: calc(50% - var(--col-layout-col-gap, 0px) / 2);
    --col-width-2: calc(25% - var(--col-layout-col-gap, 0px) / 2);
    --col-width-3: calc(25% - var(--col-layout-col-gap, 0px) / 2);
  }
}

.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%);
}

@supports not selector(& .foo) {
  @media (width > 48rem) {
    .column-layout--triple[data-widths="25_50_25"] {
      --col-width-1: calc(25% - var(--col-layout-col-gap, 0px) / 2);
      --col-width-2: calc(50% - var(--col-layout-col-gap, 0px));
      --col-width-3: calc(25% - var(--col-layout-col-gap, 0px) / 2);
    }
  }
  @media (width > 48rem) {
    .column-layout--triple[data-widths="33_33_33"] {
      --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);
    }
  }
  @media (width > 48rem) {
    .column-layout--triple[data-widths="25_25_50"] {
      --col-width-1: calc(25% - var(--col-layout-col-gap, 0px) / 2);
      --col-width-2: calc(25% - var(--col-layout-col-gap, 0px) / 2);
      --col-width-3: calc(50% - var(--col-layout-col-gap, 0px));
    }
  }
  @media (width > 48rem) {
    .column-layout--triple[data-widths="50_25_25"] {
      --col-width-1: calc(50% - var(--col-layout-col-gap, 0px) / 2);
      --col-width-2: calc(25% - var(--col-layout-col-gap, 0px) / 2);
      --col-width-3: calc(25% - var(--col-layout-col-gap, 0px) / 2);
    }
  }
  .column-layout--triple {
    --col-layout-col-gap: 0px;
    --col-layout-row-gap: 0px;
    --col-width-1: 100%;
    --col-width-2: 100%;
    --col-width-3: 100%;
    container: column/inline-size;
  }
  .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%);
  }
}