*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	font-size: 62.5%;
}
body{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	min-height: 100vh;
	padding: 2rem;
	color: hsla(0, 0%, 0%, 0.6);
}
.main{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.wrap{
	margin: 2rem;
	transform-style: preserve-3d;
	transform: perspective(100rem);
	cursor: pointer;
}
/* if you want to change the other imgs, just copy
 .container and re-name it to .container-2 or .container-3 and change the url. 
 https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80
 */
.container{
	--rX: 0;
	--rY: 0;
	--bX: 50%;
	--bY: 80%;
	width: 30rem;
	height: 36rem;
	border: 1px solid hsl(180, 20%, 90%);
	border-radius: 1.6rem;
	padding: 4rem;
	display: flex;
	align-items: flex-end;
	position: relative;
	transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
	background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)), url("https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80");
	background-position: var(--bX) var(--bY);
	background-size: 40rem auto;
	box-shadow: 0 0 3rem .5rem hsla(0, 0%, 0%, 0.2);
	transition: transform 0.6s 1s;
}


.container::before,
.container::after{
	content: "";
	width: 2rem;
	height: 2rem;
	border: 1px solid #fff;
	position: absolute;
	z-index: 2;
	opacity: 0.3;
	transition: 0.3s;
}
.container::before{
	top: 2rem;
	right: 2rem;
	border-bottom-width: 0;
	border-left-width: 0;
}
.container::after{
	bottom: 2rem;
	left: 2rem;
	border-top-width: 0;
	border-right-width: 0;
}
.container-active{
	transition: none;
}
/* .container-2{
	filter: hue-rotate(80deg) saturate(140%);
}
.container-3{
	filter: hue-rotate(160deg) saturate(140%);
} */
.container p{
	color: hsla(0, 0%, 100%, 1);
	font-size: 2.2rem;
}
.wrap:hover .container::before,
.wrap:hover .container::after{
	width: calc(100% - 4rem);
	height: calc(100% - 4rem);
}
