@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*

   WIDTHS

   Base:
     w = width

   Modifiers
     -33  = literal value 33%
     -66  = literal value 66%

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Width Scale */
.w-66 { width: 66%; }

@media (--breakpoint-not-small) {
  .w-66-ns { width: 66%; }
}

@media (--breakpoint-medium) {
  .w-66-m { width: 66%; }
}

@media (--breakpoint-large) {
  .w-66-l { width: 66%; }
}

@media print {
  .w-33-p { width: 33%; }

  .w-66-p { width: 66%; }
}