.wp-block-uagb-image {
	display: flex;
	&__figure {
		position: relative;
		display: flex;
		flex-direction: column;
		max-width: 100%;
		height: auto;
		margin: 0;

		img {
			height: auto;
			display: flex;
			max-width: 100%;
			transition: box-shadow 0.2s ease;
		}

		> a {
			display: inline-block;
		}

		figcaption {
			text-align: center;
			margin-top: 0.5em;
			margin-bottom: 1em;
		}
	}

	.components-placeholder.block-editor-media-placeholder .components-placeholder__instructions {
		align-self: center;
	}

	&--align-left {
		text-align: left;
	}

	&--align-right {
		text-align: right;
	}

	&--align-center {
		text-align: center;
	}

	&--align-full {
		.wp-block-uagb-image__figure {
			margin-left: calc(50% - 50vw);
			margin-right: calc(50% - 50vw);
			max-width: 100vw;
			width: 100vw;
			height: auto;

			img {
				height: auto;
				width: 100% !important;
			}
		}
	}

	&--align-wide {
		.wp-block-uagb-image__figure {
			img {
				height: auto;
				width: 100%;
			}
		}
	}

	&--layout-overlay {
		&__color-wrapper {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			opacity: 0.2;
			background: rgba(#000, 0.5);
			transition: opacity 0.35s ease-in-out;
		}

		&-link {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
		}

		.wp-block-uagb-image__figure:hover {
			.wp-block-uagb-image--layout-overlay__color-wrapper {
				opacity: 1;
			}
		}

		&__inner {
			position: absolute;
			left: 15px;
			right: 15px;
			bottom: 15px;
			top: 15px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			border-color: #fff;
			transition: 0.35s ease-in-out;

			&.top-left,
			&.top-center,
			&.top-right {
				justify-content: flex-start;
			}

			&.bottom-left,
			&.bottom-center,
			&.bottom-right {
				justify-content: flex-end;
			}

			&.top-left,
			&.center-left,
			&.bottom-left {
				align-items: flex-start;
			}

			&.top-right,
			&.center-right,
			&.bottom-right {
				align-items: flex-end;
			}

			.uagb-image-heading {
				color: #fff;
				transition: transform 0.35s, opacity 0.35s ease-in-out;
				transform: translate3d(0, 24px, 0);
				margin: 0;
				line-height: 1em;
			}

			.uagb-image-separator {
				width: 30%;
				border-top-width: 2px;
				border-top-color: #fff;
				border-top-style: solid;
				margin-bottom: 10px;
				opacity: 0;
				transition: transform 0.4s, opacity 0.4s ease-in-out;
				transform: translate3d(0, 30px, 0);
			}

			.uagb-image-caption {
				opacity: 0;
				overflow: visible;
				color: #fff;
				transition: transform 0.45s, opacity 0.45s ease-in-out;
				transform: translate3d(0, 35px, 0);
			}

			&:hover {
				.uagb-image-heading,
				.uagb-image-separator,
				.uagb-image-caption {
					opacity: 1;
					transform: translate3d(0, 0, 0);
				}
			}
		}
	}
	// hover effect
	&--effect {
		&-zoomin {
			.wp-block-uagb-image__figure {

				img,
				.wp-block-uagb-image--layout-overlay__color-wrapper {
					transform: scale(1);
					transition: transform 0.35s ease-in-out;
				}

				&:hover {
					img,
					.wp-block-uagb-image--layout-overlay__color-wrapper {
						transform: scale(1.05);
					}
				}
			}
		}

		&-slide {
			.wp-block-uagb-image__figure {

				img,
				.wp-block-uagb-image--layout-overlay__color-wrapper {
					width: calc(100% + 40px) !important;
					max-width: none !important;
					transform: translate3d(-40px, 0, 0);
					transition: transform 0.35s ease-in-out;
				}

				&:hover {
					img,
					.wp-block-uagb-image--layout-overlay__color-wrapper {
						transform: translate3d(0, 0, 0);
					}
				}
			}
		}

		&-grayscale {
			img {
				filter: grayscale(0%);
				transition: 0.35s ease-in-out;
			}

			&:hover {
				img {
					filter: grayscale(100%);
				}
			}
		}

		&-blur {
			img {
				filter: blur(0);
				transition: 0.35s ease-in-out;
			}

			&:hover {
				img {
					filter: blur(3px);
				}
			}
		}
	}
}
