:root {
	--home-card-aspect-ratio: 105/50;
	--home-card-width: 80vw;
	--content-home-min-width: calc(80vw * 0.5);
}

.content-home {
	width: 100%;
	margin-top: var(--nav-bar-height);
	height: calc(var(--content-height) - 2em);
	min-height: var(--content-home-min-width);
	display: flex;
	overflow-x: hidden;
	align-items: center;
	justify-content: center;
}

.home-card {
	position: relative;
	width: var(--home-card-width);
	aspect-ratio: var(--home-card-aspect-ratio);
	display: grid;
	grid-template-columns: 1fr 1.25fr 1fr;
	justify-content: center;
	align-items: center;
	gap: 5%;
	border-radius: 0.2em;
	background: #fff;
	box-shadow: 4px 4px 30px 2px rgba(0, 0, 0, 0.25);
}

.home-card-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	user-select: none;
	pointer-events: none;
}

.home-card-backdrop > img {
	width: 15%;
}

.home-card-backdrop > img:nth-child(1) {
	position: absolute;
	top: -5%;
	left: -3%;
	z-index: -1;
	transform: rotate(-128deg);
}

.home-card-backdrop > img:nth-child(2) {
	position: absolute;
	top: -5%;
	right: -3%;
	z-index: -1;
	transform: rotate(128deg) scaleX(-1);
}

.home-card-backdrop > img:nth-child(3) {
	position: absolute;
	bottom: -3%;
	left: -3%;
	transform: rotate(128deg) scaleX(-1);
}

.home-card-backdrop > img:nth-child(4) {
	position: absolute;
	bottom: -3%;
	right: -3%;
	transform: rotate(-128deg);
}

@media (max-width: 600px) {
	main {
		background-color: white;
	}
	.content-home {
		justify-content: flex-start;
		height: fit-content !important;
	}
	.home-card {
		padding: 15% 10%;
		width: 100%;
		height: fit-content !important;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		box-shadow: none;
	}
	.home-card-backdrop > img {
		width: 30%;
	}

	.home-card-backdrop > img:nth-child(1) {
		top: 0;
		left: 0;
		z-index: 0;
		transform: rotate(30deg) scaleX(1) translate(-50%, -30%);
	}
	.home-card-backdrop > img:nth-child(2) {
		top: 0;
		right: 0;
		z-index: 0;
		transform: rotate(320deg) scaleX(-1) translate(-50%, -30%);
	}
	.home-card-backdrop > img:nth-child(3),
	.home-card-backdrop > img:nth-child(4) {
		display: none;
	}
}