.asg-image {
	position: relative;
	overflow: hidden;

	> .images {
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		z-index: auto;
		overflow: hidden;
		perspective: $perspective;

		> .img {
			background-size: auto;
			background-position: 50% 50%;
			background-repeat: no-repeat;

			> .placeholder {
				position: absolute;
				top: 0px;
				right: 0px;
				bottom: 0px;
				left: 0px;
				z-index: auto;
				overflow: hidden;
				background-size: auto;
				background-position: 50% 50%;
				background-repeat: no-repeat;
				filter: blur(10px);

				&.cover {
					background-size: cover;
				}

				&.contain {
					background-size: contain;
				}

				&.stretch {
					background-size: 100% 100%;
				}
			}

			> .source {
				cursor: pointer;
				background-size: auto;
				background-position: 50% 50%;
				background-repeat: no-repeat;
				transition: all ease 0.5s;
				opacity: 0;

				&.cover {
					background-size: cover;
				}

				&.contain {
					background-size: contain;
				}

				&.stretch {
					background-size: 100% 100%;
				}
			}

			&.loaded {
				background-image: none;

				.source {
					opacity: 1;
				}
			}
		}

		@import "asg-transitions";
	}

	&.modalon .source {
		cursor: pointer;
	}

	.asg-info {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.asg-control {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.arrow {
		position: absolute;
		top: calc(50% - 35px);
		opacity: 0;
		z-index: 720;
		min-height: 70px;
		transition: all ease 0.2s;
		transform: scale(1.2);

		display: flex;
		align-items: center;
		justify-content: center;

		&.left {
			text-align: left;
			left: -20px;
		}

		&.right {
			text-align: right;
			right: -20px;
		}

		.btn {
			padding: 10px 16px;
			opacity: 0.7;

			&:hover {
				opacity: 1;
			}
		}
	}

	.video {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 710;
		background-color: black;

		> div {
			position: unset !important;
		}
	}

	.play {
		position: absolute;
		top: calc(50% - 80px);
		left: calc(50% - 80px);
		width: 160px;
		height: 160px;
		z-index: 800;
		text-align: center;

		.button {
			fill: white;
			opacity: 0.42;
			cursor: pointer;
			transition: all $animspeed;
			border-radius: 50%;

			&:hover {
				opacity: 0.77;
				box-shadow: 0px 0px 7px #212121;
			}

			svg {
				stroke-width: 2;
			}
		}
	}

	&:hover {
		.arrow {
			opacity: 1;
			transform: scale(1);

			&.left {
				left: 0;
			}

			&.right {
				right: 0;
			}
		}
	}
}