.card.small {
  width: clamp(200px, 40vw, 300px);
  height: 250px;
}

.card.medium {
  width: clamp(280px, 60vw, 500px);
  height: 350px;
}

.card.large {
  width: clamp(320px, 90vw, 700px);
  height: 420px;
}

.card.main {
  width: clamp(10rem, 90vw, 20rem);
  height: 20rem;
}

.card .inner {
  padding: 1rem;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.card h2 {
  font-size: clamp(1.25rem, 2.5vw, 2rem);
}

.card p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.card {
  --pads: 40px;
  --color-sens: calc(var(--glow-sens) + 20);
  position: relative;
  width: clamp(320px, 90vw, 600px);
  height: 100px;
  border-radius: 1.768em;
  isolation: isolate;
  transform: translate3d(0, 0, 0.1rem);
  display: grid;
  border: 0.1rem solid hsla(var(--active-color), 2.5%, 80%, 25%);
  background: var(--card-bg);
  background-repeat: no-repeat;
  transition: --pointer-d 0.4s, --pointer-° 0.4s, --glow-sens 0.4s, --glow-blend 0.4s;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.card::before,
.card::after,
.card > .glow {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.card::before,
.card::after,
.card > .glow {
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
  transform: scale(var(--aspect-x, 1), var(--aspect-y, 1));
  transform-origin: center;
}

.card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--glow-border) border-box;
  opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
  mask-image: conic-gradient(from var(--pointer-°) at center, black 25%, transparent 40%, transparent 60%, black 75%);
}

.card::after {
  border: 1px solid transparent;
  transition: all 1.4s ease;
  background: var(--glow-border);/*
    radial-gradient(at 80% 55%, hsla(268,100%,76%,1) 0px, transparent 50%) padding-box,
    radial-gradient(at 69% 34%, hsla(349,100%,74%,1) 0px, transparent 50%) padding-box,
    radial-gradient(at 8% 6%, hsla(136,100%,78%,1) 0px, transparent 50%) padding-box,
    radial-gradient(at 41% 38%, hsla(192,100%,64%,1) 0px, transparent 50%) padding-box,
    radial-gradient(at 86% 85%, hsla(186,100%,74%,1) 0px, transparent 50%) padding-box,
    radial-gradient(at 82% 18%, hsla(52,100%,65%,1) 0px, transparent 50%) padding-box,
    radial-gradient(at 51% 4%, hsla(12,100%,72%,1) 0px, transparent 50%) padding-box,
    linear-gradient(#c299ff 0 100%) padding-box;*/
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--pointer-°) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
  mix-blend-mode: var(--blend);
}

.card > .glow {
  --outset: var(--pads);
  inset: calc(var(--outset) * -1);
  pointer-events: none;
  z-index: 1;
  mask-image: conic-gradient(from var(--pointer-°) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
  mix-blend-mode: var(--glow-blend);
}

.card > .glow::before {
  content: "";
  position: absolute;
  inset: var(--outset);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px hsl(var(--glow-color) / 100%),
    inset 0 0 2px 2px hsl(var(--glow-color) / 90%),
    inset 0 0 5px 1px hsl(var(--glow-color) / 75%),
    inset 0 0 8px 1px hsl(var(--glow-color) / 66%),
    inset 0 0 15px 0 hsl(var(--glow-color) / 50%),
    inset 0 0 25px 2px hsl(var(--glow-color) / 30%),
    inset 0 0 50px 2px hsl(var(--glow-color) / 10%),

    0 0 2px 2px hsl(var(--glow-color) / 90%),
    0 0 5px 1px hsl(var(--glow-color) / 75%),
    0 0 8px 1px hsl(var(--glow-color) / 66%),
    0 0 15px 0 hsl(var(--glow-color) / 50%),
    0 0 25px 2px hsl(var(--glow-color) / 30%),
    0 0 50px 2px hsl(var(--glow-color) / 10%);
}