@custom-media --breakpoint-not-small screen and (min-width: 30em);
@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
@custom-media --breakpoint-large screen and (min-width: 60em);

/*

   TEXT DECORATION

*/

.strike       { text-decoration: line-through; }
.underline    { text-decoration: underline; }
.no-underline { text-decoration: none; }


@media (--breakpoint-not-small) {
  .strike-ns       { text-decoration: line-through; }
  .underline-ns    { text-decoration: underline; }
  .no-underline-ns { text-decoration: none; }
}

@media (--breakpoint-medium) {
  .strike-m       { text-decoration: line-through; }
  .underline-m    { text-decoration: underline; }
  .no-underline-m { text-decoration: none; }
}

@media (--breakpoint-large) {
  .strike-l       { text-decoration: line-through; }
  .underline-l {    text-decoration: underline; }
  .no-underline-l { text-decoration: none; }
}