section {
  display: flex;
  justify-content: center;
  gap: 3vw;
}

img {
  border-radius: 14px 14px 0px 0px;
  object-fit: cover;
  flex: 1;
  min-height: 45%;
  width: 100%;
}

.flip-card {
  margin: 10px;
  cursor: pointer;
  background-color: transparent;
  width: 20%;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

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

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  border-radius: 14px;
  border: 1px solid rgb(35, 35, 35);
  display: flex;
  flex-direction: column;
}

.flip-card-back {
  border-radius: 14px;
  background-color: white;
  color: black;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  justify-content: center;
}

.flip-card-back > h4 {
  font-size: min(3vmin, 1.7em);
}

.flip-card-back > p {
  padding: 1.5vh 1.5vw 1.5vh 0.2vw;
  font-size: min(2vmin, 1.3em);
  font-weight: 100;
}

.flip-card-back > ul {
  padding-top: 1vh;
  padding-left: 3vw;
  font-size: min(2vmin, 1.3em);
  font-weight: 100;
}

.flip-card-back > ul > li {
  font-weight: 100;
}

.flip-card-front > h3 {
  padding: 1.5vh 1.5vw 0px 1.5vw;
  font-size: calc(1vh + 1vw);
}

.flip-card-front > span {
  padding: 0px 1.5vw 1.5vh 1.5vw;
  font-size: calc(0.7vh + 0.7vw);
  opacity: 0.3;
}
.flip-card-front > p {
  flex: 1;
  padding: 1.5vh 1.5vw 1.5vh 1.5vw;
  font-weight: 100;
  font-size: calc(0.7vw + 0.7vh);
  overflow: hidden;
}