.features {
	width: 100%;
	height: 350px;
	position: relative;
	background: var(--ifm-bg-light);
	margin-top: -5px;
}

.container {
	width: 100%;
	-webkit-clip-path: polygon(0 40%, 100% 0%, 100% 100%, 0% 100%);
	clip-path: polygon(0 40%, 100% 0%, 100% 100%, 0% 100%);
	height: 350px;
	background: linear-gradient(132.76deg, #a13455 -80.79%, #1a1e44 54.08%);
	/* base-shadow */

	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	position: relative;
	border-bottom: 2px solid rgba(252, 175, 23, 0.1);
}

.leftPurpleLine {
	content: '';
	position: absolute;
	bottom: 81%;
	left: 12.5%;
	width: 10%;
	height: calc(100vh / (100 / 5));
	background-color: rgba(160, 102, 170, 0.8);
	transform: matrix(1, -0.1, 0, 0.99, 0, 0);
	z-index: 2;
}

.rightPurpleLine {
	content: '';
	position: absolute;
	bottom: 80%;
	right: 12.5%;
	width: 10%;
	height: calc(100vh / (100 / 5));
	background-color: rgba(160, 102, 170, 0.8);
	transform: matrix(1, -0.1, 0, 0.99, 0, 0);
	z-index: 2;
}

[data-theme='dark'] .footerFeatureSvg [fill] {
	fill: var(--white);
}

.Contentcontainer {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin-right: 30px;
	align-items: center;
	height: 100%;
	.headline {
		color: var(--ifm-white);
		margin-right: -10px;
		@media (max-width: 380px) {
			margin-right: -30px;
		}
	}
}

.Contentcontainer h5 {
	height: max-content;
	margin-bottom: 60px;
	white-space: nowrap;
	min-width: fit-content;
}

@media screen and (max-width: 640px) {
	.heroCardContainer,
	.container {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}

	.features:before,
	.features:after,
	.leftPurpleLine,
	.rightPurpleLine {
		display: none;
	}
}
