.cards-grid {
  display: flex;
  flex-wrap: wrap; /* Permite que las tarjetas se ajusten en filas */
  gap: 80px; /* Puedes reemplazar grid-gap por gap para mayor compatibilidad */
  padding-bottom: 60px;
  justify-content: center;
  align-items: center;

}

/* Estilos responsivos para dispositivos móviles */
@media screen and (max-width: 768px) {
  .cards-grid {
    gap: 20px; /* Reduce el espacio entre tarjetas */
  }
  .flip-card {
    width: 90%;  /* O bien, puedes usar un porcentaje o un ancho fijo menor */
    height: auto; /* Permite que la altura se ajuste según el contenido */
    margin: 0 auto;
  }
  .flip-card-inner {
    min-height: 250px; /* Ajusta este valor según el contenido de la tarjeta */
  }
}

/* FLIP CARD */
.flip-card {
  width: 310px;
  height: 290px;
  perspective: 2000px;

}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border-radius: 28px;
  transition: all 550ms cubic-bezier(0.1, 0.22, 0.8, 1.13);
  transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  backface-visibility: hidden;}

.flip-card-front {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 1.25rem;
  text-align: center;
  display: grid;
  place-items: center;
  padding: 32px;

}
.flip-card-back {
  font-size: 1.25rem;
  text-align: center;
  display: grid;
  place-items: center;
  padding: 32px;
  background-color: #00c08a;
  transform: rotateY(180deg);
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(-180deg);
}

.colortexto{
color: #00c08a;;
}