[class^="pattern--"] {
  background-repeat: repeat;
}
.pattern-size--xs { background-size: 10%; }
.pattern-size--s  { background-size: 20%; }
.pattern-size--m  { background-size: 30%; }
.pattern-size--l  { background-size: 40%; }
.pattern-size--xl { background-size: 50%; }

/* dotts */
.pattern--dotts--black {
  background-image: url("./pattern_dotts_black.svg");
}
.pattern--dotts--blue-grey {
  background-image: url("./pattern_dotts_blue-grey.svg");
}
.pattern--dotts--grey {
  background-image: url("./pattern_dotts_grey.svg");
}
.pattern--dotts--orange {
  background-image: url("./pattern_dotts_orange.svg");
}
.pattern--dotts--white {
  background-image: url("./pattern_dotts_white.svg");
}
/* waves */
.pattern--waves--black {
  background-image: url("./pattern_waves_black.svg");
}
.pattern--waves--blue-grey {
  background-image: url("./pattern_waves_blue-grey.svg");
}
.pattern--waves--grey {
  background-image: url("./pattern_waves_grey.svg");
}
.pattern--waves--orange {
  background-image: url("./pattern_waves_orange.svg");
}
.pattern--waves--white {
  background-image: url("./pattern_waves_white.svg");
}