.shape__container{
	position: relative;
	width: 350px;
	margin: 64px auto;
}

.shape{
	--angle: 6deg;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #2c75c3;
	width: 100%;
	border-radius: 30px;
	transform: skew(calc(var(--angle) * -1), calc(var(--angle) * -1));
	z-index: 10;
	position: relative;
	box-shadow: 0px 5px 14px rgba(9, 33, 58, 0.1);
}

.shape__title{
	color: #FFF;
	position: relative;
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.shape__title svg{
	position: absolute;
	z-index: -1;
	color: #6D8AF2;
}

.shape__body{
	color: #f4f4f4;
	padding: 8px 24px;
	transform: skew(var(--angle), var(--angle));
	text-align: left;
}

.shape__shadow{
	position: absolute;
	top: 0;
	left: 0;
	background: #d2d5d9;
	width: 100%;
	height: 100%;
	z-index: 5;
	border-radius: 30px;
	transform: skewX(-5deg) skewY(-5deg) rotate(-20deg);
}





.shape-2{
	--angle: -1deg;
	background: #ff5656;
}

.shape-2 .shape__body{
}

.shape-2 .shape__title svg{
	transform: scaleX(-1);
	color: #ff0b0b;
}