.bounceCardsContainer {
  --bounce-card-size: var(--portfolio-bounce-card-size, clamp(220px, 24vw, 430px));
  position: relative;
  height: var(--portfolio-bounce-stage-height, calc(var(--bounce-card-size) * 1.08));
  overflow: visible;
}

.bounceCardsContainer .card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--bounce-card-size);
  height: var(--bounce-card-size);
  aspect-ratio: 1;
  border-radius: var(--radius-card, clamp(12px, 3vw, 18px));
  transform-origin: 50% 50%;
  cursor: pointer;
  will-change: transform;
  text-decoration: none;
  overflow: visible;
}

.bounceCardsContainer .cardTiltSurface {
  border-radius: inherit;
  transform: none;
  transform-origin: center;
}

.bounceCardsContainer .card-2 {
  z-index: 5;
}

.bounceCardsContainer .card-1,
.bounceCardsContainer .card-3 {
  z-index: 4;
}

.bounceCardsContainer .card-0,
.bounceCardsContainer .card-4 {
  z-index: 3;
}

.bounceCardsContainer .image {
}

@media (max-width: 768px) {
  .bounceCardsContainer {
    --bounce-card-size: var(--portfolio-bounce-card-size, clamp(130px, 36vw, 200px));
    height: var(--portfolio-bounce-stage-height, calc(var(--bounce-card-size) * 1.62)) !important;
    min-height: var(--portfolio-bounce-stage-height, calc(var(--bounce-card-size) * 1.62));
    position: relative;
    margin-inline: auto;
    max-width: calc(100% - 28px);
    overflow: visible;
    touch-action: pan-y;
  }
  
  .bounceCardsContainer .card {
    border-radius: var(--radius-card, clamp(10px, 2.5vw, 14px));
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}