.rotate-45 {
  transform: rotate(45deg);
}
.rotate-90 {
  transform: rotate(90deg);
}
.rotate-135 {
  transform: rotate(135deg);
}
.rotate-180 {
  transform: rotate(180deg);
}
.rotate-225 {
  transform: rotate(225deg);
}
.rotate-270 {
  transform: rotate(270deg);
}
.rotate-315 {
  transform: rotate(315deg);
}

@media screen and (min-width: 30em) {
  .rotate-45-ns {
    transform: rotate(45deg);
  }
  .rotate-90-ns {
    transform: rotate(90deg);
  }
  .rotate-135-ns {
    transform: rotate(135deg);
  }
  .rotate-180-ns {
    transform: rotate(180deg);
  }
  .rotate-225-ns {
    transform: rotate(225deg);
  }
  .rotate-270-ns {
    transform: rotate(270deg);
  }
  .rotate-315-ns {
    transform: rotate(315deg);
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .rotate-45-m {
    transform: rotate(45deg);
  }
  .rotate-90-m {
    transform: rotate(90deg);
  }
  .rotate-135-m {
    transform: rotate(135deg);
  }
  .rotate-180-m {
    transform: rotate(180deg);
  }
  .rotate-225-m {
    transform: rotate(225deg);
  }
  .rotate-270-m {
    transform: rotate(270deg);
  }
  .rotate-315-m {
    transform: rotate(315deg);
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .rotate-45-ml {
    transform: rotate(45deg);
  }
  .rotate-90-ml {
    transform: rotate(90deg);
  }
  .rotate-135-ml {
    transform: rotate(135deg);
  }
  .rotate-180-ml {
    transform: rotate(180deg);
  }
  .rotate-225-ml {
    transform: rotate(225deg);
  }
  .rotate-270-ml {
    transform: rotate(270deg);
  }
  .rotate-315-ml {
    transform: rotate(315deg);
  }
}

@media screen and (min-width: 60em) {
  .rotate-45-l {
    transform: rotate(45deg);
  }
  .rotate-90-l {
    transform: rotate(90deg);
  }
  .rotate-135-l {
    transform: rotate(135deg);
  }
  .rotate-180-l {
    transform: rotate(180deg);
  }
  .rotate-225-l {
    transform: rotate(225deg);
  }
  .rotate-270-l {
    transform: rotate(270deg);
  }
  .rotate-315-l {
    transform: rotate(315deg);
  }
}