.flip-card {
    width: 300px; /* Slightly wider */
    margin: 0 auto;
    perspective: 1000px;
  }
  .flip-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 300px); /* fixed width matching flip-card */
    gap: 1.5rem;
    max-width: calc(4 * 300px + 3 * 1.5rem); /* total width of columns + gaps */
    margin: 2rem auto; /* center the grid horizontally */
    justify-content: center;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 220px; /* Shorter height */
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 15px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .flip-card-front {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .flip-card-front img {
    width: 100px;
    border-radius: 50%;
    margin-bottom: 1rem;
  }
  
  .flip-card-front h3 {
    color: #4A3C6D;
  }
  
  .flip-card-back {
    background-color: #D7C1E0;
    color: #4A3C6D;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 768px) {
    .flip-card-grid {
      grid-template-columns: repeat(2, 140px); /* 2 smaller cards per row */
      gap: 1rem;
      max-width: calc(2 * 140px + 1 * 1rem); /* Adjust total grid width */
    }
  
    .flip-card {
      width: 140px;
    }
  
    .flip-card-inner {
      height: 180px; /* slightly shorter card */
    }
  
    .flip-card-front img {
      width: 60px; /* smaller image */
      margin-bottom: 0.5rem;
    }
  
    .flip-card-front h3 {
      font-size: 0.9rem;
    }
  
    .flip-card-back {
      font-size: 0.85rem;
      padding: 0.75rem;
    }

    .flip-card-back p {
      font-size: .85rem;
    }
  }