.mdel-flipper {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 300px;
  perspective: 5000px;
  transform-style: preserve-3d;
  transition: all 1s ease;
  transform-origin: center;

  .mdel-front,
  .mdel-back {
    position: absolute;
    background: #f1f1f1;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    // align-items: center;
    backface-visiblity: hidden;
    flex-direction: column;

    ul {
      margin: 20px 0;

      li {
        color: #fff;
      }
    }
  }

  .mdel-front {
    z-index: 2;
    background-size: cover;
  }

  .mdel-back {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: rotateY(180deg);
  }
}

.mdel-flip-box:hover .mdel-flipper {
  transform: rotateY(180deg);
}