/* The upstream snippet only ships the GSAP tween logic (which drives
   transform-based x/y/rotation/scale offsets *from center*) — it assumes a
   centered, portrait-card base layout already exists via matching CSS that
   wasn't included. This file supplies that base: each `.fanCard` is
   absolute-positioned at the container's center via margin offsets (not
   `transform: translate(-50%,-50%)`, since GSAP takes over the `transform`
   property entirely and a percentage-based base transform doesn't compose
   predictably with GSAP's own px-based x/y). Sizes/breakpoints mirror
   card-fan-carousel.tsx's own getHeightMultiplier() cutoffs (480/640/768/1024). */

.fanLayout {
  position: relative;
  width: 100%;
  height: 15.5rem;
}

.fanCard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9rem;
  height: 15.5rem;
  margin: -7.75rem 0 0 -4.5rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  will-change: transform;
}

@media (min-width: 480px) {
  .fanLayout {
    height: 18rem;
  }

  .fanCard {
    width: 10.5rem;
    height: 18rem;
    margin: -9rem 0 0 -5.25rem;
  }
}

@media (min-width: 640px) {
  .fanLayout {
    height: 19.5rem;
  }

  .fanCard {
    width: 11rem;
    height: 19.5rem;
    margin: -9.75rem 0 0 -5.5rem;
  }
}

@media (min-width: 768px) {
  .fanLayout {
    height: 24rem;
  }

  .fanCard {
    width: 13.5rem;
    height: 24rem;
    margin: -12rem 0 0 -6.75rem;
  }
}

@media (min-width: 1024px) {
  .fanLayout {
    height: 26.5rem;
  }

  .fanCard {
    width: 15.5rem;
    height: 26.5rem;
    margin: -13.25rem 0 0 -7.75rem;
  }
}