/* Transform origin */

.to-top         { transform-origin: center top; }
.to-right       { transform-origin: center right; }
.to-bottom      { transform-origin: center bottom; }
.to-left        { transform-origin: center left; }
.to-topLeft     { transform-origin: top left; }
.to-topRight    { transform-origin: top right; }
.to-BottomRight { transform-origin: bottom right; }
.to-BottomLeft  { transform-origin: bottom left; }

@media (--breakpoint-1) {
  .bp1-to-top           { transform-origin: center top; }
  .bp1-to-right         { transform-origin: center right; }
  .bp1-to-bottom        { transform-origin: center bottom; }
  .bp1-to-left          { transform-origin: center left; }
  .bp1-to-topLeft       { transform-origin: top left; }
  .bp1-to-topRight      { transform-origin: top right; }
  .bp1-to-BottomRight   { transform-origin: bottom right; }
  .bp1-to-BottomLeft    { transform-origin: bottom left; }
}

@media (--breakpoint-2) {
  .bp2-to-top           { transform-origin: center top; }
  .bp2-to-right         { transform-origin: center right; }
  .bp2-to-bottom        { transform-origin: center bottom; }
  .bp2-to-left          { transform-origin: center left; }
  .bp2-to-topLeft       { transform-origin: top left; }
  .bp2-to-topRight      { transform-origin: top right; }
  .bp2-to-BottomRight   { transform-origin: bottom right; }
  .bp2-to-BottomLeft    { transform-origin: bottom left; }
}

@media (--breakpoint-3) {
  .bp3-to-top           { transform-origin: center top; }
  .bp3-to-right         { transform-origin: center right; }
  .bp3-to-bottom        { transform-origin: center bottom; }
  .bp3-to-left          { transform-origin: center left; }
  .bp3-to-topLeft       { transform-origin: top left; }
  .bp3-to-topRight      { transform-origin: top right; }
  .bp3-to-BottomRight   { transform-origin: bottom right; }
  .bp3-to-BottomLeft    { transform-origin: bottom left; }
}

@media (--breakpoint-4) {
  .bp4-to-top           { transform-origin: center top; }
  .bp4-to-right         { transform-origin: center right; }
  .bp4-to-bottom        { transform-origin: center bottom; }
  .bp4-to-left          { transform-origin: center left; }
  .bp4-to-topLeft       { transform-origin: top left; }
  .bp4-to-topRight      { transform-origin: top right; }
  .bp4-to-BottomRight   { transform-origin: bottom right; }
  .bp4-to-BottomLeft    { transform-origin: bottom left; }
}