.glidy--flip-box {
  svg {
    width: 1em;
    height: 1em;
  }

  &.style-1 {
    position: relative;
    width: 300px;
    height: 200px;
    perspective: 1000px;

    &:hover {
      .flipbox-front {
        transform: rotateY(-180deg);
      }

      .flipbox-back {
        transform: rotateY(0deg);
      }
    }

    .card {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      text-align: center;
      backface-visibility: hidden;
      transition: transform 0.5s ease-in-out;
      transform-style: preserve-3d;
    }

    .flipbox-front {
      transform: rotateY(0deg);
      background-color: #9e8e90;
    }

    .flipbox-back {
      transform: rotateY(180deg);
      background: #9e8ed9;
      padding: 10px;
    }
  }
}