%translate-gallery {
	opacity: 1;
	transform: translateY(-50%);
	transition-delay: .2s;
}
/*===figure=====*/
figure {
	&.img-wrapper::after {
		background-color: #fff;
		bottom: 20px;
		content: "";
		display: block;
		left: 20px;
		opacity: 0;
		position: absolute;
		right: 20px;
		top: 20px;
		transform: rotateX(-90deg);
		transform-origin: 50% 50%;
		transition: all .5s ease-in-out;
	}

	&.img-wrapper {
		overflow: hidden;
		perspective: 50em;
		position: relative;
		text-align: center;

		img {
			max-width: 100%;
			vertical-align: top;
		}

		* {
			box-sizing: padding-box;
			transition: all .2s ease-out;
		}

		figcaption {
			left: 20px;
			opacity: 0;
			position: absolute;
			right: 20px;
			top: 50%;
			z-index: 1;
		}

		h4 {
			text-transform: uppercase;
			margin: 0;
		}

		h2 {
			margin: 0;
			font-weight: 600;
		}

		a {
			bottom: 0;
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 1;
		}

		&.hover::after {
			opacity: .9;
			transform: rotateX(0);
		}

		&:hover::after {
			opacity: .9;
			transform: rotateX(0);
		}

		&.hover figcaption {
			@extend %translate-gallery;
		}

		&:hover figcaption {
			@extend %translate-gallery;
		}
	}
}
