/* Step 4: Basic Card Structure */
.card {
	position: relative;
}

/* Step 5: Card Content and Glass Effect */
.card-content {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
  	padding: 25px 10px;
}

/* Step 6: 3D Transform Properties */
.container {
	perspective: 2000px;
}

.card {
	transform-style: preserve-3d;
	transition: transform 0.1s ease-out;
}

.card-content {
	transform-style: preserve-3d;
}

/* Step 7: Lighting Effect on Hover */
.card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		125deg,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0) 60%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
	pointer-events: none;
}

.card:hover::before {
	opacity: 1;
}