.column-layout--double {
  --col-layout-col-gap: 0px;
  --col-layout-row-gap: 0px;
  --col-width-1: 100%;
  --col-width-2: 100%;
  container: column/inline-size;
  &[data-widths="50_50"] {
    @media (width > 40rem) {
      --col-width-1: calc(50% - var(--col-layout-col-gap, 0px) + (var(--col-layout-col-gap, 0px) / 2));
      --col-width-2: calc(50% - var(--col-layout-col-gap, 0px) + (var(--col-layout-col-gap, 0px) / 2));
    }
  }
  &[data-widths="25_75"] {
    @media (width > 40rem) {
      --col-width-1: calc(25% - (var(--col-layout-col-gap, 0px) / 2));
      --col-width-2: calc(75% - (var(--col-layout-col-gap, 0px) / 2));
    }
  }
  &[data-widths="75_25"] {
    @media (width > 40rem) {
      --col-width-1: calc(75% - (var(--col-layout-col-gap, 0px) / 2));
      --col-width-2: calc(25% - (var(--col-layout-col-gap, 0px) / 2));
    }
  }
  &[data-widths="33_66"] {
    @media (width > 40rem) {
      --col-width-1: calc(100% / 3 - (var(--col-layout-col-gap, 0px) / 2));
      --col-width-2: calc(((100% / 3) * 2) - (var(--col-layout-col-gap, 0px) / 2));
    }
  }
  &[data-widths="66_33"] {
    @media (width > 40rem) {
      --col-width-1: calc(((100% / 3) * 2) - (var(--col-layout-col-gap, 0px) / 2));
      --col-width-2: calc(100% / 3 - (var(--col-layout-col-gap, 0px) / 2));
    }
  }
  &[data-widths="fit_auto"] {
    @media (width > 40rem) {
      flex-wrap: nowrap;
      .col {
        &:nth-of-type(1) {
          flex-grow: 1;
        }
        &:nth-child(2) {
          flex-basis: auto;
        }
      }
    }
  }
  &[data-widths="auto_fit"] {
    @media (width > 40rem) {
      flex-wrap: nowrap;
      .col {
        &:nth-child(1) {
          flex-basis: auto;
        }
        &:nth-of-type(2) {
          flex-grow: 1;
        }
      }
    }
  }
  .col {
    &:nth-of-type(1) {
      flex-basis: var(--col-width-1, 100%);
    }
    &:nth-of-type(2) {
      flex-basis: var(--col-width-2, 100%);
    }
  }
}

@supports not selector(& .foo) {
  @media (width > 40rem) {
    .column-layout--double[data-widths="50_50"] {
      --col-width-1: calc(50% - var(--col-layout-col-gap, 0px) + (var(--col-layout-col-gap, 0px) / 2));
      --col-width-2: calc(50% - var(--col-layout-col-gap, 0px) + (var(--col-layout-col-gap, 0px) / 2));
    }
  }
  @media (width > 40rem) {
    .column-layout--double[data-widths="25_75"] {
      --col-width-1: calc(25% - (var(--col-layout-col-gap, 0px) / 2));
      --col-width-2: calc(75% - (var(--col-layout-col-gap, 0px) / 2));
    }
  }
  @media (width > 40rem) {
    .column-layout--double[data-widths="75_25"] {
      --col-width-1: calc(75% - (var(--col-layout-col-gap, 0px) / 2));
      --col-width-2: calc(25% - (var(--col-layout-col-gap, 0px) / 2));
    }
  }
  @media (width > 40rem) {
    .column-layout--double[data-widths="33_66"] {
      --col-width-1: calc(100% / 3 - (var(--col-layout-col-gap, 0px) / 2));
      --col-width-2: calc(((100% / 3) * 2) - (var(--col-layout-col-gap, 0px) / 2));
    }
  }
  @media (width > 40rem) {
    .column-layout--double[data-widths="66_33"] {
      --col-width-1: calc(((100% / 3) * 2) - (var(--col-layout-col-gap, 0px) / 2));
      --col-width-2: calc(100% / 3 - (var(--col-layout-col-gap, 0px) / 2));
    }
  }
  @media (width > 40rem) {
    .column-layout--double[data-widths="fit_auto"] {
      flex-wrap: nowrap;
    }
    .column-layout--double[data-widths="fit_auto"] .col:nth-of-type(1) {
      flex-grow: 1;
    }
    .column-layout--double[data-widths="fit_auto"] .col:nth-child(2) {
      flex-basis: auto;
    }
  }
  @media (width > 40rem) {
    .column-layout--double[data-widths="auto_fit"] {
      flex-wrap: nowrap;
    }
    .column-layout--double[data-widths="auto_fit"] .col:nth-child(1) {
      flex-basis: auto;
    }
    .column-layout--double[data-widths="auto_fit"] .col:nth-of-type(2) {
      flex-grow: 1;
    }
  }
  .column-layout--double {
    --col-layout-col-gap: 0px;
    --col-layout-row-gap: 0px;
    --col-width-1: 100%;
    --col-width-2: 100%;
    container: column/inline-size;
  }
  .column-layout--double .col:nth-of-type(1) {
    flex-basis: var(--col-width-1, 100%);
  }
  .column-layout--double .col:nth-of-type(2) {
    flex-basis: var(--col-width-2, 100%);
  }
}