.actionButtonFlip {
  perspective: 1000px;
  transform-style: preserve-3d;
  width: 100%;
  margin-bottom: var(--padding);
}
@media (hover: hover) {
  .actionButtonFlip:hover .back {
    transform: rotateY(0);
  }
  .actionButtonFlip:hover .front {
    transform: rotateY(180deg);
  }
}
.actionButtonFlip .flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.actionButtonFlip .front,
.actionButtonFlip .back {
  width: 100%;
  border-radius: 5px;
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}
.actionButtonFlip .front {
  transform: rotateY(0deg);
  background-size: cover;
  background-repeat: no-repeat;
}
.actionButtonFlip .front .frontContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: 80%;
}
.actionButtonFlip .front .frontContent .blockTitle {
  font-family: var(--subfont);
  font-weight: 500;
  font-size: 2.4rem;
  color: var(--color1);
  line-height: 1.2;
}
.actionButtonFlip .back {
  transform: rotateY(-180deg);
}
.actionButtonFlip.vertical {
  position: relative;
}
.actionButtonFlip.vertical .back {
  transform: rotateX(180deg);
}
@media (hover: hover) {
  .actionButtonFlip.vertical.vertical:hover .back {
    transform: rotateX(0deg);
  }
  .actionButtonFlip.vertical.vertical:hover .front {
    transform: rotateX(180deg);
  }
}