.card {
  overflow: visible;
}

.card1 {
  width: 250px;
  height: 300px;
  background: none;
  border-radius: 20px;
  position: relative;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  transform-style: preserve-3d;
}

.contributor-content {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.card-flip {
  box-shadow: rgba(90, 135, 190, 0.56) 0px 22px 70px 4px;
  transition: transform 300ms;
  transform: translatez(70px) scale(0.8);
  line-height: 1.5em;
}

.side {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #fff;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border-radius: 20px;
}

.front,
.back {
  background-color: #e0edfe;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 5px;
  overflow: hidden;
}

.back {
  width: 100%;
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.back-background {
  transform: rotateY(180deg);
  z-index: 0;
  padding-top: 10px;
  /* background: linear-gradient(135deg, #001bff 0%, #eb6922 100%); */
  background-image: url("https://userscontent2.emaze.com/images/f9538183-0ff9-478f-b964-c8ab90421e3b/3d28e192fda5c17250f96a2779c84475.jpg");
}

.back::before {
  position: absolute;
  content: " ";
  display: block;
  width: 160px;
  height: 160%;
}

.back-content {
  position: absolute;
  width: 99%;
  height: 99%;
  border-radius: 5px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.card:hover .content {
  transform: rotateY();
}

.front {
  color: bl;
}

.front-img {
  z-index: 2;
  background-size: 100vh;
  background-size: cover;
  /* background: linear-gradient(135deg, #d8d8ea 0%, #211c3c 100%); */
  background-image: url("https://userscontent2.emaze.com/images/f9538183-0ff9-478f-b964-c8ab90421e3b/3d28e192fda5c17250f96a2779c84475.jpg");
}

.front .front-content {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.front-content .badge {
  background-color: #00000055;
  padding: 2px 10px;
  border-radius: 10px;
  backdrop-filter: blur(2px);
  width: fit-content;
}

/* .description {
  box-shadow: 0px 0px 10px 5px #00000088;
  margin-top: 20px;
  width: 100%;
  padding: 10px;
  background-color: #00000099;
  backdrop-filter: blur(5px);
  border-radius: 5px;
} */

.title {
  font-size: 15px;
  color: yellow;
  max-width: 100%;
  display: flex;
  margin-bottom: 4px;
  justify-content: center;
}

.title p {
  width: 50%;
}

.card-footer {
  font-size: 10px;
}

.front .img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
