body {
	margin:0;
	height:100vh;
	display:grid;
	place-items:center;
	background:whitesmoke;
	perspective:800px;
}
.card {
	transform-style:preserve-3d;
	position:relative;
	width:300px;
	height:400px;
	border-radius:40px;
	background:white;
	box-shadow:0 20px 60px -10px rgba(50,50,93,0.6);
	transform:translate(0px,0px) rotateX(1deg) rotateY(1deg);
	transition:all 0.25s linear;
}
.card:has(.ev:nth-child(1):hover) {
	transform:translate(-5px,-5px) rotateX(-10deg) rotateY(10deg);
}
.card:has(.ev:nth-child(2):hover) {
	transform:translate(0px,-5px) rotateX(-10deg) rotateY(0deg);
}
.card:has(.ev:nth-child(3):hover) {
	transform:translate(5px,-5px) rotateX(-10deg) rotateY(-10deg);
}
.card:has(.ev:nth-child(4):hover) {
	transform:translate(-5px,0px) rotateX(0deg) rotateY(10deg);
}
.card:has(.ev:nth-child(5):hover) {
	transform:translate(0px,0px) rotateX(1deg) rotateY(1deg);
}
.card:has(.ev:nth-child(6):hover) {
	transform:translate(5px,0px) rotateX(0deg) rotateY(-10deg);
}
.card:has(.ev:nth-child(7):hover) {
	transform:translate(-5px,5px) rotateX(10deg) rotateY(10deg);
}
.card:has(.ev:nth-child(8):hover) {
	transform:translate(0px,5px) rotateX(10deg) rotateY(0deg);
}
.card:has(.ev:nth-child(9):hover) {
	transform:translate(5px,5px) rotateX(10deg) rotateY(-10deg);
}
.inner {
	transform-style:preserve-3d;
	position:absolute;
	width:100%;
	height:100%;
	border-radius:inherit;
	background-image:url(https://images.unsplash.com/photo-1655962866768-6c8a110c2ba3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2487&q=80);
	background-size:cover;
}
.events {
	transform-style:preserve-3d;
	position:absolute;
	width:100%;
	height:100%;
	display:grid;
	grid-template:repeat(3,1fr)/repeat(3,1fr);
}
.ev {
	transform-style:preserve-3d;
	display:inline-block;
	transform:translateZ(1px);
	outline:1px solid rgba(0,0,0,0.1);
}
.ev:hover {
	background:rgba(255,255,255,0.1);
}