@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', sans-serif;
}

body{
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:100vh;
	background:#f3f3f3;
	overflow:hidden;
}

.container
{
	position:relative;
	width:1000px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	transform:skewY(-10deg);
	transition:0.5s;	
}
.container .card:before
	{
		content:'';
		position:absolute;
		top:-15px;
		left:0;
		width:100%;
		height:15px;
		background:#00c0f6;
		transform-origin:bottom;
		transform: skewX(45deg);
		transition:0.5s;
	}







.container .card:after
	{
		content:'';
		position:absolute;
		top:-15px;
		left:-15px;
		width:15px;
		height:50%;
		background:#00c0f6;
		transform-origin:left;
		transform: skewY(45deg);
		transition:0.5s;
		border-bottom:200px solid #d9d9d9;
	}
.container .card
{
	position:relative;
	width:300px;
	height:400px;
	background:#fff;
	transition:0.5s;
}
.container .card:hover
{
	transform:translateY(-40px);
}
.container .card .imgBx
{
	position:relative;
	width:300px;
	height:200px;
	background:#00c7ff;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
.container .card .imgBx img
{
	max-width:100px;
}
.container .card .imgBx h3
{
	position:relative;
	color:#fff;
	margin-top:10px;
}
.container .card .content
{
	position:relative;
	width:100%;
	height:200px;
	padding:20px;
	color:#777;
	background:#fff;
	text-align:center;
}


.container .card .content:before
	{
		content:'';
		position:absolute;
		left:0;
		bottom:0;
		width:100%;
		height:400px;
		background:linear-gradient(transparent,transparent,rgba(0,0,0,.1));
		transform-origin:bottom;
		transform: skewX(45deg);
		transition:0.5s;
		pointer-events:none;
		z-index:-1;
	}

.container .card:hover .content:before
{
	transform:translateY(40px) skewX(45deg);
	filter:blur(5px);
	opacity:0.5;
}



.container .card:nth-child(1)
{
	z-index:3;
}

.container .card:nth-child(2)
{
	z-index:2;
}

.container .card:nth-child(3)
{
	z-index:1;
}