%hover-animation {
  transition: transform 0.3s ease;

  &:hover {
    will-change: transform;
  }
}

.hover-elevate-up {
  @extend %hover-animation;

  &:hover {
    transform: translateY(-4px);
  }
}

.hover-elevate-down {
  @extend %hover-animation;

  &:hover {
    transform: translateY(4px);
  }
}

.hover-scale {
  @extend %hover-animation;

  &:hover {
    transform: scale(1.1);
  }
}

.hover-rotate-end {
  @extend %hover-animation;

  &:hover {
    transform: rotate(4deg);
  }
}

.hover-rotate-start {
  @extend %hover-animation;
  
  &:hover {
    transform: rotate(-4deg);
  }
}