h1 {
    text-align: center;
    margin-bottom: 2rem;
    color: white;
  }

  .hover-card-container {
    transition: transform 0.5s ease-in-out !important;
  }

  .hover-card-content{
    z-index: 3;
    position: relative;
  }

  .hover-card {
    border-radius: 29px;
    width: 200px;
    height: 260px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-weight: 600;
    user-select: none;
  }

  .hover-card img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* or 'cover' depending on what you want */
    border-radius: inherit;
  }

.stacked-3d::part(tilt) {
  will-change: transform, box-shadow, mask;
}

.stacked-3d::part(tilt)::before {
  z-index: 1;
}

.stacked-3d-content {
  --depth: 30px;
  --layer-z: max(var(--hover-tilt-opacity) * var(--depth), 0px);
  --shadow-opacity: calc(var(--hover-tilt-opacity) * 0.4);
  --shadow-size: calc(var(--depth) / 5);
  --shadow-offset: calc(var(--depth) / 8);
  --shadow-offset-x: calc(var(--shadow-x) * var(--shadow-offset));
  --shadow-offset-y: calc(var(--shadow-y) * var(--shadow-offset));
  transform-style: preserve-3d;
}

.stacked-3d-bg{
    position: absolute;
    height: 100px;
}

.stacked-3d-logo{
    position: absolute;
    height: 100px;
}

.stacked-3d-logo,
.stacked-3d-image {
  transform: translateZ(var(--layer-z));
  filter: drop-shadow(
    var(--shadow-offset-x) 
    var(--shadow-offset-y) 
    var(--shadow-size) 
    rgba(0, 0, 0, var(--shadow-opacity))
  );
  will-change: transform, filter, opacity;
}

.stacked-3d-image.asset-card-name {
  filter: drop-shadow(
    var(--shadow-offset-x) 
    var(--shadow-offset-y) 
    var(--shadow-size) 
    rgba(255, 255, 255, var(--shadow-opacity))
  ) !important;
}

.stacked-3d-image {
  transform: translateZ(calc(var(--layer-z) * 1.1));
  opacity: calc(var(--hover-tilt-opacity) * 1.2 - 0.1);
  /* position: absolute; */
}

.asset-card-logo.stacked-3d-image {
  top: 0vh;
}