.card-wrapper11:hover {
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    translate: calc((var(--ratiox) - 0.5) * -5%) calc((var(--ratioy) - 0.5) * -5%);
  }
  
  .card-wrapper11: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;
  }
  
  /*形を整える*/
  .card {
    border-radius: 4.5% / 3.5%;
    box-shadow: 0 10px 20px -5px #000;
    height: 100%;
    position: absolute;
    width: 100%;
  }
  
  .card-wrapper11 {
    aspect-ratio: .716;
    display: grid;
    height: calc(100% - 32px);
    max-width: 100%;
    place-items: center;
    position: relative;
    /* overflow: hidden; */
  }