.column-layout--quad {
  .col {
    grid-column: span 12;
  }

  &[data-mobile-columns="2"], &[data-print-columns="2"] {
    .col {
      grid-column: span 6;
    }
    @container column (width > 40rem) {
      .col {
        grid-column: span 6;
      }
    }
    @container column (width > 48rem) {
      .col {
        grid-column: span 3;
      }
    }
  }
  &[data-mobile-columns="4"], &[data-print-columns="4"] {
    .col {
      grid-column: span 6;
    }
    @container column (width > 40rem) {
      .col {
        grid-column: span 3;
      }
    }
    @container column (width > 48rem) {
      .col {
        grid-column: span 3;
      }
    }
  }
  @container column (width > 40rem) {
    .col {
      grid-column: span 6;
    }
  }
  @container column (width > 48rem) {
    .col {
      grid-column: span 3;
    }
  }
}