.jogo .card {
  padding: 30px;
  margin: 15px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17vw;
  height: 200px; /* AUMENTEI */
  border-radius: 0px 30px 0px 30px;
  user-select: none;
}

.jogo .card img {
  width: 150px;  /* AUMENTEI */
  height: 150px; /* AUMENTEI */
  border-radius: 30px 30px 30px 30px;
}

/* frente e verso */
.frente,
.verso {
  width: 150px;  /* AUMENTEI */
  height: 150px; /* AUMENTEI */
  padding: 150px;
  position: absolute;
  backface-visibility: hidden;
}

.frente {
  transform: rotateY(180deg);
}

.jogo {
  align-items: center;
  padding: 10px;
  /* margin: 10px; */
  /* top: 24px; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: center;
  /* background-color: #3a3a3a; */
}


.jogo .card img {
  width: 180px;
  height: 160px;
  border-radius: 30px 30px 30px 30px;
}

.jogo .card,
.jogo .virado {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.jogo .card {
  /* background-color: #c4c4c4; */
  background-color: #183163ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.card:active {
  transform: scale(0.97);
  transition: transform 0.2s;
}

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

.card.flip[data-nome="CONVI A_Z"],
.card.flip[data-nome="CONVI A_Z"] img {
  background-color: #0400ff;
}

.card.flip[data-nome="CONVI GEST"],
.card.flip[data-nome="CONVI GEST"] img {
  background-color: #0400ff;
}

.card.flip[data-nome="CONVI HAIR"],
.card.flip[data-nome="CONVI HAIR"] img {
  background-color: #0400ff;
}

.card.flip[data-nome="CONVI MULHER"],
.card.flip[data-nome="CONVI MULHER"] img {
  background-color: #0400ff;
}

.card.flip[data-nome="CONVI POWER"],
.card.flip[data-nome="CONVI POWER"] img {
  background-color: #0400ff;
}

.card.flip[data-nome="OMEGAVIVA"],
.card.flip[data-nome="OMEGAVIVA"] img {
  background-color: #0400ff;
}
/* novas */

.frente,
.verso {
  width: 100px;
  height: 100px;
  padding: 15px;
  position: absolute;
  backface-visibility: hidden;
}

.frente {
  transform: rotateY(180deg);
}
