.card-wrapper {
  position: relative;
  width: 80%;
  max-width: 500px;
  aspect-ratio: 1.6;
  margin: auto;
  background-color: #00000000;
}

.card.color {
  position: absolute;
  inset: 0;
  background-image:

    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1) 0px,
      rgba(0, 0, 0, 0.05) 2px,
      rgba(255, 255, 255, 0.1) 4px
    ),

    linear-gradient(
      180deg,
      hsl(0, 0%, 80%) 0%,
      hsl(0, 0%, 95%) 47%,
      hsl(0, 0%, 80%) 53%,
      hsl(0, 0%, 70%) 100%
    ),

    linear-gradient(
      -33deg, 
      rgb(206, 42, 36) 6.3%,
       rgb(255, 244, 3) 15.13%, 
       rgb(77, 221, 129) 26.05%, 
       rgb(35, 29, 150) 38.66%, 
       rgb(41, 56, 147) 55.46%, 
       rgb(206, 42, 36) 70.17%, 
       rgb(181, 64, 228) 79.83%),

    radial-gradient(farthest-corner at var(--mx, 50%) var(--my, 50%),
      rgba(6, 218, 255, 0.6) 0%,
      rgba(38, 235, 127, 0.6) 25%,
      rgba(155, 78, 228, 0.6) 50%,
      rgba(228, 78, 90, 0.6) 75%
    );
  background-blend-mode: multiply, overlay, soft-light, screen;
  background-size: 150% 150%, 100% 100%, 200% 700%, 200% 100%;
  background-position: center, center, 0% var(--posy, 50%), var(--posx, 50%) var(--posy, 50%);
  filter: brightness(1.1) contrast(1.4) saturate(0.9);
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
}