<div class="container">

	<figure class="card card--1" style="--image-src: url('https://source.unsplash.com/78A265wPiO4')">
		<figcaption>
			<span class="info">
				<h3>The Hills</h3>
				<span>by David Marcu</span>
			</span>
			<span class="links">
				<a href="#"><i class="fas fa-heart"></i></a>
				<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
				<a href="https://unsplash.com/photos/78A265wPiO4" target="_blank"><i class="fas fa-share"></i></a>
			</span>
		</figcaption>
	</figure>

	<figure class="card card--2" style="--image-src: url('https://source.unsplash.com/TFyi0QOx08c')">
		<figcaption>
			<span class="info">
				<h3>The Forest</h3>
				<span>by Jay Mantri</span>
			</span>
			<span class="links">
				<a href="#"><i class="fas fa-heart"></i></a>
				<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
				<a href="https://unsplash.com/photos/TFyi0QOx08c" target="_blank"><i class="fas fa-share"></i></a>
			</span>
		</figcaption>
	</figure>

	<figure class="card card--3" style="--image-src: url('https://source.unsplash.com/PP8Escz15d8')">
		<figcaption>
			<span class="info">
				<h3>The Desert</h3>
				<span>by Keith Hardy</span>
			</span>
			<span class="links">
				<a href="#"><i class="fas fa-heart"></i></a>
				<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
				<a href="https://unsplash.com/photos/PP8Escz15d8" target="_blank"><i class="fas fa-share"></i></a>
			</span>
		</figcaption>
	</figure>

	<figure class="card card--4" style="--image-src: url('https://source.unsplash.com/DLwUVlzrP0Q')">
		<figcaption>
			<span class="info">
				<h3>The Ocean</h3>
				<span>by Dan Stark</span>
			</span>
			<span class="links">
				<a href="#"><i class="fas fa-heart"></i></a>
				<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
				<a href="https://unsplash.com/photos/DLwUVlzrP0Q" target="_blank"><i class="fas fa-share"></i></a>
			</span>
		</figcaption>
	</figure>

</div>



<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
</div>

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e4e4e4;
}

.container {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;
}

figure.card {
	position: relative;
	width: 380px;
	height: 240px;
	background-image: var(--image-src);
	background-position: 50% 50%;
	background-size: 125%;
	transition: background 400ms ease;
	box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
	overflow: hidden;
	&:hover {
		figcaption {
			transform: translateY(0px);
		}
	}

	&--1 {
		&:hover {
			background-position: 50% 100%;
		}
		figcaption {
			bottom: 0;
			transform: translateY(80px);
		}
	}
	&--2 {
		background-size: 110%;
		&:hover {
			background-position: 50% -100%;
		}
		figcaption {
			top: 0;
			transform: translateY(-80px);
		}
	}
	&--3 {
		background-size: 115%;
		&:hover {
			background-position: -100% 50%;
		}
		figcaption {
			left: 0;
			transform: translateX(-180px);
		}
	}
	&--4 {
		&:hover {
			background-position: 100% 50%;
		}
		figcaption {
			right: 0;
			transform: translateX(180px);
		}
	}

	&--1,
	&--2 {
		figcaption {
			width: 100%;
			height: 80px;
			padding: 15px 20px;
		}
	}
	&--3,
	&--4 {
		figcaption {
			flex-direction: column;
			width: 180px;
			height: 100%;
			padding: 20px 15px;
		}
	}

	figcaption {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		background: #282828;
		transition: transform 400ms ease;
		.info {
			color: rgb(226, 226, 226);
			font-family: "Montserrat";
			h3 {
				font-size: 1.2rem;
				letter-spacing: 1px;
				margin-bottom: 2px;
			}
			span {
				color: #72cc60;
				font-size: 0.85rem;
			}
		}
		.links {
			display: flex;
			justify-content: end;
			align-items: center;
			a {
				text-decoration: none;
				position: relative;
				width: 35px;
				height: 35px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				margin-left: 10px;
				font-size: 1.2rem;
				opacity: 0.65;
				border-radius: 50%;
				overflow: hidden;
				&:hover {
					opacity: 1;
				}
				&:focus {
					outline: none;
					&::after {
						transform: scale(1);
						opacity: 1;
					}
				}
				&::after {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					opacity: 0;
					background: rgba(255, 255, 255, 0.05);
					transform: scale(0.5);
					z-index: -1;
					transition: all 150ms ease;
				}
			}
		}
	}
}

@media only screen and (max-width: 900px) {
	body {
		align-items: start;
	}
	.container {
		grid-template-rows: repeat(4, 1fr);
		grid-template-columns: 1fr;
		grid-gap: 40px;
		padding: 80px 0;
	}
}






.support{
	position: fixed;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
	a{
		margin: 0 10px;
		color: #222;
		font-size: 1.8rem;
		backface-visibility: hidden;
		transition: all 150ms ease;
		&:hover{
			transform: scale(1.1);
		}
	}

}