.effect {
	display: inline-block;
	backface-visibility: hidden;
	transform-origin: center center;
	transition-property: transform, opacity, filter;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	will-change: transform;
}

.effect.hover { cursor: pointer; }
.effect.fast { transition-duration: 0.15s }
.effect.slow { transition-duration: 0.6s }
.effect.zoom-effect:hover { transform: scale(1.05) }
.effect.zoom-strong:hover { transform: scale(1.1) }
.effect.zoom-dark:hover { transform: scale(1.08); filter: brightness(0.85) }
.effect.fade-effect { opacity: 0.7 }
.effect.fade-effect:hover { opacity: 1 }
.effect.fade-out:hover { opacity: 0.5 }
.effect.rotate-effect:hover { transform: rotate(3deg) scale(1.03) }
.effect.rotate-strong:hover { transform: rotate(6deg) scale(1.05) }
.effect.blur-effect:hover { filter: blur(2px) }
.effect.zoom-fade:hover { transform: scale(1.05); opacity: 0.85 }
.effect.zoom-rotate:hover { transform: scale(1.05) rotate(2deg) }
.effect.top-left { transform-origin: top left }
.effect.top-right { transform-origin: top right }
.effect.bottom-left { transform-origin: bottom left }
.effect.bottom-right { transform-origin: bottom right }