.card-wrapper8:hover {
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    translate: calc((var(--ratiox) - 0.5) * -5%) calc((var(--ratioy) - 0.5) * -5%);
  }
  
  .card-wrapper8:hover > .highlight {
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.8) 10%, rgba(255,255,255,.65) 20%, rgba(0,0,0,.5) 90%);
    mix-blend-mode: overlay;
  }
  
  .color {
    mix-blend-mode: color-dodge;
    display: grid;
  }
  
  .card-wrapper8:hover > .color {
    background-image:
         url("https://drive.google.com/uc?export=view&id=1ZDJdJX1eWTqg3rTkkqDWZPMm3wvyQMkP"),
          repeating-linear-gradient( 0deg, 
          rgb(255, 119, 115) 5%, 
          rgba(255,237,95,1) 10%, 
          rgba(168,255,95,1) 15%, 
          rgba(131,255,247,1) 20%, 
          rgba(120,148,255,1) 25%, 
          rgb(216, 117, 255) 30%, 
          rgb(255, 119, 115) 35%
          ),
          repeating-linear-gradient( 
          133deg, 
          #0e152e 0%, 
          hsl(180, 10%, 60%) 3.8%, 
          hsl(180, 29%, 66%) 4.5%, 
          hsl(180, 10%, 60%) 5.2%, 
          #0e152e 10% , 
          #0e152e 12% 
          ),
          radial-gradient(
          farthest-corner circle 
          at var(--mx) var(--my),
          rgba(0, 0, 0, .1) 12%, 
          rgba(0, 0, 0, .15) 20%, 
          rgba(0, 0, 0, .25) 120%
          );
    background-blend-mode: difference, hue, hard-light;
    background-size: 25% 20%, 200% 700%, 300% 100%, 200% 100%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
    filter: brightness(0.75) contrast(2.5) saturate(.75);
  }
  
  .card-wrapper8:hover > .color::after {
    content: "";
      background-size: 25% 20%, 200% 400%, 195% 100%, 200% 100%;
      background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy);
      filter: brightness(1.2) contrast(1) saturate(1.75);
      mix-blend-mode: exclusion;
    background-image: url("https://drive.google.com/uc?export=view&id=1ZDJdJX1eWTqg3rTkkqDWZPMm3wvyQMkP"),
          repeating-linear-gradient( 0deg, 
          rgb(255, 119, 115) 5%, 
          rgba(255,237,95,1) 10%, 
          rgba(168,255,95,1) 15%, 
          rgba(131,255,247,1) 20%, 
          rgba(120,148,255,1) 25%, 
          rgb(216, 117, 255) 30%, 
          rgb(255, 119, 115) 35%
          ),
          repeating-linear-gradient( 
          133deg, 
          #0e152e 0%, 
          hsl(180, 10%, 60%) 3.8%, 
          hsl(180, 29%, 66%) 4.5%, 
          hsl(180, 10%, 60%) 5.2%, 
          #0e152e 10% , 
          #0e152e 12% 
          ),
          radial-gradient(
          farthest-corner circle 
          at var(--mx) var(--my),
          rgba(0, 0, 0, .1) 12%, 
          rgba(0, 0, 0, .15) 20%, 
          rgba(0, 0, 0, .25) 120%
          );
      background-blend-mode: difference, hue, hard-light;
  }
  
  /*形を整える*/
  .card {
    border-radius: 4.5% / 3.5%;
    box-shadow: 0 10px 20px -5px #000;
    height: 100%;
    position: absolute;
    width: 100%;
    overflow: hidden;
  }
  
  .card-wrapper8 {
    aspect-ratio: .716;
    display: grid;
    height: calc(100% - 32px);
    max-width: 100%;
    place-items: center;
    position: relative;
  }