$padding: 25px;

.lqd-frickin-img-holder,
.lqd-frickin-img-bg {
	transition: opacity 1s 0s cubic-bezier(0.23, 1, 0.320, 1), transform 1.5s 0.25s cubic-bezier(0.23, 1, 0.320, 1);
	transform: translate(0, 0);
	opacity: 0;
}
.lqd-frickin-img-bg {
	display: inline-block;
	position: absolute;
	top: $padding;
	left: $padding;
	right: $padding;
	bottom: $padding;
	z-index: 0;
	background-color: var(--color-primary);
}
.lqd-frickin-img-holder {
	z-index: 2;
	opacity: 0;
	box-shadow: 0 30px 50px rgba(#000, 0.17);

	figure {
		background-size: cover;
	}
	img {
		width: 100%;
	}
	[data-responsive-bg=true] {

		> img {
			visibility: hidden;
		}
	}
}
.lqd-frickin-img-inner {
	padding: $padding;
}
.lqd-frickin-img-holder,
.lqd-frickin-img {
	position: relative;
}

.lqd-frickin-img {
	margin-bottom: 30px;

	&.is-in-view {
		
		.lqd-frickin-img-bg,
		.lqd-frickin-img-holder {
			opacity: 1;
		}
		.lqd-frickin-img-bg {
			transform: translate(-12px, 12px);
		}
		.lqd-frickin-img-holder {
			transform: translate(12px, -12px);
		}
		
		&.lqd-freak-to-left {
			
			.lqd-frickin-img-bg {
				transform: translate(12px, 12px);
			}
			.lqd-frickin-img-holder {
				transform: translate(-12px, -12px);
			}
		}
	}
}