.column-layout--triple {
  --col-layout-col-gap: 0px;
  --col-layout-row-gap: 0px;
  .col {
    grid-column: span 12;
  }
  &[data-mobile-columns="1"], &[data-print-columns="1"] {
    .col {
      grid-column: span 12;
    }
  }
  &[data-mobile-columns="2"], &[data-print-columns="2"] {
    .col {
      grid-column: span 6;
    }
  }
  &[data-mobile-columns="3"], &[data-print-columns="3"] {
    .col {
      grid-column: span 4;
    }
  }
}

.column-layout--triple[data-widths="25_50_25"] {
  @container column (width > 40rem) {
    .col:nth-of-type(1),
    .col:nth-of-type(3) {
      grid-column: span 3;
    }
    .col:nth-of-type(2) {
      grid-column: span 6;
    }
  }
}
.column-layout--triple[data-widths="33_33_33"] {
  @container column (width > 40rem) {
    .col {
      grid-column: span 4;
    }
  }
}
.column-layout--triple[data-widths="25_25_50"] {
  @container column (width > 40rem) {
    .col:nth-of-type(1),
    .col:nth-of-type(2) {
      grid-column: span 3;
    }
    .col:nth-of-type(3) {
      grid-column: span 6;
    }
  }
}
.column-layout--triple[data-widths="50_25_25"] {
  @container column (width > 40rem) {
    .col:nth-of-type(1) {
      grid-column: span 6;
    }
    .col:nth-of-type(2),
    .col:nth-of-type(3) {
      grid-column: span 3;
    }
  }
}