/* cdgrid */
.cdgrid{
	--number-of-columns:3;
	--aspect-ratio:1;
}
/* board */
.cdgrid{
	display:grid;
	grid-template-columns:
		repeat(var(--number-of-columns),1fr);
	grid-column-gap:2vw;
	grid-row-gap:2vw;
}
/* card */
.cdgrid-card{
	position:relative;
	aspect-ratio:var(--aspect-ratio);
	border-radius:5px;
	overflow:hidden;
	transition:transform 0.3s;
	cursor:pointer;
}
@supports not (aspect-ratio:auto){
	.cdgrid-card{
		padding-bottom:calc(100% / var(--aspect-ratio));
	}
}
@media(hover:hover){
	.cdgrid-card:hover{
		transform:scale(1.15);
	}
}
.cdgrid-card:active{
	transform:scale(0.9);
}
.cdgrid:not([data-gstate="normal"]) .cdgrid-card[data-cstate="closed"]{
	pointer-events:none;
}
.cdgrid-card-front{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-size:cover;
	background-position:center;
	border:5px solid white;
}
.cdgrid-card-cover{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.cdgrid-card-back{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color:rgba(255,255,255,0.4);
}
.cdgrid-card-back-pic{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity:0.5;
	pointer-events:none;
}
@media(hover:hover){
	.cdgrid-card:hover .cdgrid-card-back-pic{
		opacity:1;
	}
	.cdgrid-card:hover .cdgrid-card-back{
		background-color:rgba(255,255,255,0.6);
	}
}