body { font-family: sans-serif; }

.flip-cards {
  perspective: 1000px;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
  margin-bottom: 40px;
}

.card.is-flipped {
  transform: rotateX(180deg);
}

.card.is-flipped .card__face.card__face--front {
  position: absolute;
}

.card.is-flipped .card__face.card__face--back {
  position: relative;
}

.card__face {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: inherit;
  padding: 5%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card__face .image-container {
  flex: 1 0 60%;
}

.card__face .content-container {
  color: #FFFFFF;
  flex: 1 0 35%;
  margin-left: 5%;
}

.card__face h4 {
  color: #FFFFFF;
}

.card__face svg {
  bottom: 20px;
  position: absolute;
  right: 20px;
}

.card .card__face--front svg {
  transition: all 0s;
  transition-delay: .6s;
}

.card.is-flipped .card__face--front svg {
  opacity: 0;
  transition: all 0s;
  transition-delay: .4s;
}

.card__face.card__face--front {
  background-color: #34363A;
  height: 100%;
}

.card__face a {
  color: #FFFFFF;
  border-color: #ffc614;
}

.card__face.card__face--back {
  background-image: linear-gradient(138deg, #ED2127 0%, #2B2B2B 100%);
  position: absolute;
  top: 0;
  transform: rotateX(180deg);
}

.card__face.card__face--back a {
  border-bottom-color: #FFC614;
  color: #FFFFFF;
}

.card__face,
.card__face .image-container {
  height: inherit;
}

.card__face .image-container {
  display: flex;
}

.card__face .image-container img {
  display: block;
  margin: auto;
  max-height: 100%;
}

@media (max-width: 767px) {
  .card__face, .card__face .image-container {
    height: auto;
  }
  .card__face {
    padding: 5% 5% 15%;
  }
  .card__face .content-container,
  .card__face .image-container {
    flex-basis: 100%;
  }
  .card__face .image-container {
    display: block;
  }
  .card__face .content-container {
    margin: 20px 0 0;
  }
}