@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;500&display=swap');
*{
	margin:0;
	padding:0px;
	box-sizing:border-box;
	font-family:'poppins';
}

body{
	display:flex;
	justify-content:center;
	align-items:center;
	background:#111;
	flex-direction:colum;
}

.container{
	position:relative;
	margin-top:300px;
	max-width:800px;
	transform:skewY(-20deg);
}

.container .imgBx
{
	position:relative;
	width:100%;
	height:200px;
	transform-origin:bottom;
	transform:skewX(45deg);
}


.container .imgBx img
{
	position:absolute;
	top:0;
	left:0;
	max-width:100%;
	transition:0.5s
}


.container .imgBx:hover img:nth-child(3)
{
	transform:translate(100px,-100px);
}
.container .imgBx:hover img:nth-child(2)
{
	transform:translate(50px,-50px);
	opacity:0.5;
}
.container .imgBx:hover img:nth-child(1)
{
	transform:translate(0px,0px);
	opacity:0.1;
}

.container h2{
	position:relative;
	color:#fff;
	font-size:3.5em;
}

.container .skew{
	transform-origin:top;
	transform:skewX(45deg);
}

.container .skew p{
	color:#fff;
	text-align:justify;
	font-size:1em;
}

.container .skew a{
	position:relative;
	padding:10px 30px;
	display:inline-block;
	background:transparent;
	color:#fff;
	transform-origin:top;
	margin-top:20px;
	border:2px solid #fff;
	transform:skewX(-45deg);
	text-decoration:none;
	letter-spacing:2px;
	font-size:20px;
	transition:0.5s;
}

.container .skew a:hover{
	background:#fff;
	color:#000;
}