.card {
  --grain: url("/img/grain.webp");
  --glitter: url("/img/gray.webp");
  --glitter-black: url("/img/black.webp");
  --glittersize: 25%;

  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

  --red: #f80e35;
  --yellow: #eedf10;
  --green: #21e985;
  --blue: #0dbde9;
  --violet: #c929f1;

  --clip: inset(9.85% 8% 52.85% 8%);
  --clip-invert: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    0 47.15%,
    91.5% 47.15%,
    91.5% 9.85%,
    8% 9.85%,
    8% 47.15%,
    0 50%
  );

  --clip-stage: polygon(
    91.5% 9.85%,
    57% 9.85%,
    54% 12%,
    17% 12%,
    16% 14%,
    12% 16%,
    8% 16%,
    8% 47.15%,
    92% 47.15%
  );
  --clip-stage-invert: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    0 47.15%,
    91.5% 47.15%,
    91.5% 9.85%,
    57% 9.85%,
    54% 12%,
    17% 12%,
    16% 14%,
    12% 16%,
    8% 16%,
    8% 47.15%,
    0 50%
  );

  --clip-trainer: inset(14.5% 8.5% 48.2% 8.5%);
  --clip-borders: inset(2.8% 4% round 2.55% / 1.5%);
}

.card__shine,
.card__glare {
  will-change: transform, opacity, background-image, background-size,
    background-position, background-blend-mode, filter;
}