<style>
    /* Box container with perspective */
    .flip-container {
      perspective: 1000px;
    }

    .flip-card {
      width: 100%;
      height: 300px; /* Fixed height */
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s;
    }

    /* Flip effect on hover */
    .flip-container:hover .flip-card {
      transform: rotateY(180deg);
    }

    /* Front side of the box (image + text) */
    .flip-card-front,
    .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }

    /* Front side with image and text */
    .flip-card-front {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border: 2px solid #ddd;
      border-radius: 10px;
    }

    .flip-card-front img {
      width: 100%;
      height: auto;
      border-bottom: 2px solid #ddd;
      border-radius: 10px;
    }

    .flip-card-front .text {
      padding: 10px;
      font-size: 18px;
      text-align: center;
    }

    /* Back side with different content */
    .flip-card-back {
      background-color: #f8f9fa;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 20px;
      border: 2px solid #ddd;
      border-radius: 10px;
      transform: rotateY(180deg);
    }

  </style>