.flipcard-container {
        --border-radius:7px;
        box-shadow: none;
        backface-visibility: visible;
        transform-style: preserve-3d;
        padding: 0;
        margin:0;
        transition: all 0.2s ease-out;
        border: none;
        width: auto;
        display: inline-block;
              border-radius: 16px;

    }



    .flipcard-container .inner-card-backface {
        transform: rotateX(0) rotateY(0deg) scale(-1, 1) translateZ(-4px);
      border-radius: var(--border-radius);
            overflow: hidden;

      position: absolute;
      transition: all 0.15s ease-out;
        will-change: transform, filter;
      width: 100%;
      height: 100%;
    }
    .flipcard-container.flipped {
      transform: rotateY(180deg);
    }
    .flipcard-container .flip-inner-card {
      transform: rotateY(180deg);
      position: absolute;
      top: 0;
      padding: 2rem 1.5rem;
      box-sizing: border-box;
      left: 0;
      width: 100%;
      height: 100%;
   }

    .flipcard-container .inner-card {
        will-change: transform, filter;
        transition: all 0.15s ease-out;
      border-radius: var(--border-radius);

        overflow: hidden;
        display: block;
        transform: rotateX(0deg) rotateY(0deg) scale(1);
        filter: drop-shadow(0 15px 15px rgba(0,0,0,0.3));
        perspective-origin: 0 0;
    }

    .flipcard-container .inner-card,
    .flipcard-container .inner-card-backface {

        background: black;

    }


.flipcard-container .glare {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 0.1s ease-out;
  opacity: 0.3;
  pointer-events: none;
  /*! height: 100%; */
      border-radius: var(--border-radius);
  z-index: 9999;
  mix-blend-mode: hard-light;
  background: radial-gradient(circle at 50% 50%, rgb(199 198 243), transparent);
}