.pm-glass-card{
  box-sizing: border-box;
  background: var(--pm-card-bg, rgba(12,37,60,.12));
  border: var(--pm-card-border-width, 1px) solid var(--pm-card-border, rgba(255,255,255,.18));
  border-radius: var(--pm-card-radius, 18px);
  padding: var(--pm-card-padding, 24px);
  color: var(--pm-card-text, inherit);
  position: relative;
  overflow: hidden;

  /* Glass */
  -webkit-backdrop-filter: blur(var(--pm-card-blur, 14px));
  backdrop-filter: blur(var(--pm-card-blur, 14px));

  /* Shadow */
  box-shadow: 0 18px 55px rgba(0,0,0,var(--pm-card-shadow-alpha, .18));

  transition:
    transform var(--pm-card-transition, 260ms) ease,
    box-shadow var(--pm-card-transition, 260ms) ease,
    filter var(--pm-card-transition, 260ms) ease,
    opacity var(--pm-card-transition, 260ms) ease;
}

.pm-glass-card__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transform: scale(1.05);
  pointer-events: none;
}

.pm-glass-card__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--pm-card-overlay, rgba(0,0,0,0));
  pointer-events: none;
}

.pm-glass-card__content{
  position: relative;
  z-index: 2;
}

.pm-card-flex{
  display: flex;
  flex-direction: column;
}

.pm-card-flex .pm-glass-card__content{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: var(--pm-card-justify, flex-start);
}

/* Clickable */
.pm-card-clickable{
  cursor: pointer;
}
.pm-card-clickable:focus-visible{
  outline: 2px solid var(--pm-card-glow, rgba(221,52,59,.35));
  outline-offset: 3px;
}

/* Hover effects */
.pm-hover-none:hover{
  transform: none;
}
.pm-hover-lift:hover{
  transform: translateY(-6px);
}
.pm-hover-liftScale:hover{
  transform: translateY(-6px) scale(1.02);
}
.pm-hover-liftGlow:hover{
  transform: translateY(-6px);
  box-shadow:
    0 22px 70px rgba(0,0,0,calc(var(--pm-card-shadow-alpha, .18) + .12)),
    0 0 var(--pm-card-glow-size, 28px) var(--pm-card-glow, rgba(221,52,59,.18));
}

/* Scroll fade */
.pm-scroll-fade{
  opacity: 0;
  transform: translateY(var(--pm-fade-translate, 12px));
  will-change: transform, opacity;
}

.pm-scroll-fade.pm-inview{
  opacity: 1;
  transform: none;
}
