.column-layout--double {
  --col-layout-col-gap: 40px;
  --col-layout-row-gap: 40px;
  --col-width-1: 100%;
  --col-width-2: 100%;
  container: column / inline-size;
  @media (width > 50rem) {
    --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));
  }
  .col {
    &:nth-of-type(1) {
      flex-basis: var(--col-width-1, 100%);
    }
    &:nth-of-type(2) {
      flex-basis: var(--col-width-2, 100%);
    }
  }
}