.flip-box-wrap {
  margin-top: 70px;
  flex-flow: row wrap;
  justify-content: space-evenly;
  display: flex;
}

.flip-box {
  min-width: 250px;
  height: 250px;
  perspective: 1000px;
  display: block;
  margin: 1rem auto;
  flex: 0 1;
}

.flip-box img {
  max-width: 200px;
  margin: auto;
  width: 100%;
}

@media (max-width: 1500px) { 
  .flip-box { min-width: 220px; height: 220px; }
  .flip-box img { width: 170px; height: 170px; }
}

.flip-box div { border-radius: 8px; }

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  box-shadow: 0 0 7px 2px #c1c1c1;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  transform: translate3d(0, 0, 65px);
  transform-style: preserve-3d; 
}

/* Style the back side */
.flip-box-back {
  background-image: linear-gradient(45deg, #2af598, #009efd);
  color: white;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  flex-flow: column;
  padding: 1rem;
}

.flip-box-back h4 {
  margin: 1rem auto;
  font-size: 1.75rem;
  text-align: center;
  transform: translate3d(0, 0, 65px);
}

.flip-box-back p {
  color: white;
  font-size: 1.2rem;
  text-align: center;
  font-weight: 600;
  transform: translate3d(0, 0, 65px);
}