* {
	margin:0;
	padding:0;
}
body {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	background:#161623;
	min-height:100vh;
}
section {
	position:relative;
}
section:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:linear-gradient(#ff0000,#ff00ff);
	clip-path:circle(30% at right 90%);
}
section:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:linear-gradient(#2196f3,#e91e63);
	clip-path:circle(20% at 10% 10%);
}
.main {
	position:relative;
	z-index:1;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	margin:40px 0;
}
.main .card {
	position:relative;
	width:300px;
	height:400px;
	background:rgba(255,255,255,0.03);
	margin:20px;
	box-shadow:0 15px 35px rgba(0,0,0,0.2);
	border-radius:15px;
	back-filter:blur(10px);
	display:flex;
	justify-content:center;
	align-items:center;
}
.main .card .cardTop {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	opacity:0.5;
	transition:0.5s;
}
.main .card:hover .cardTop {
	opacity:1;
	transform:translateY(-20px);
}
.main .card .cardTop .viewImg {
	position:relative;
	width:150px;
	height:150px;
	border-radius:50%;
	overflow:hidden;
	border:10px solid rgba(0,0,0,0.3);
}
.main .card .cardTop .viewImg img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
.main .card .cardTop .viewText {
	color:#fff;
	text-transform:uppercase;
	letter-spacing:2px;
	font-weight:500;
	font-size:18px;
	text-align:center;
	margin:20px 0 15px;
	line-height:1.3em;
}
.main .card .cardTop .viewText span {
	font-size:12px;
	font-weight:300;
	text-transform:initial;
}
.main .card .cardBtm {
	position:absolute;
	bottom:40px;
	display:flex;
}
.main .card .cardBtm li {
	list-style:none;
	margin:0 10px;
	transform:translateY(30px);
	transition:0.5s;
	opacity:0;
	transition-delay:calc(0.1s*var(--i));
}
.main .card:hover .cardBtm li {
	transform:translateY(0);
	opacity:1;
}
.main .card .cardBtm li a {
	color:#fff;
	font-size:20px;
	list-style:none;
}
.main .card .cardBtm li a {
	text-decoration:none;
}