.cards{
	display: grid;gap: 20px;margin-bottom: 20px;
	transition: all 1s;
}
.cards.a{
	transform: rotate3d(0,1,0,360deg);
}

@media(min-width:600px){
 .cards{grid-template-columns: repeat(2,1fr);}
}
@media(min-width:800px){
 .cards{grid-template-columns: repeat(3,1fr);}
}
@media(min-width:1000px){
 .cards{grid-template-columns: repeat(4,1fr);}
 .cards.a{
	transform: rotate3d(0,1,0.05,360deg);
 }
}

.scene {
  height: 400px;
  perspective: 1200px;
}

.scen{height: 400px;}
.scen>img{border-radius: 10px;filter: grayscale(1);opacity:.6;}

.card {
  width:100%;height: 100%;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center center;
	/*transform-origin: center right;*/
  transition: transform 1s;
}

.card.flipped {
  transform: rotateY(180deg);
}

.card>div {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card img{max-height: 100%;border-radius: 10px;}

.card>.back {
  transform: rotateY(180deg);
}

.status{
	padding: 6px 20px;
	margin: 10px auto;
	border-radius: 15px;
	width: fit-content;
}