.card-wrapper{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s,box-shadow .3s}
.card-wrapper:hover{box-shadow:0 22px 36px rgba(0,0,0,.28)}
.card-wrapper .card__media::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;z-index:2;pointer-events:none;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .7s}
.card-wrapper:hover .card__media::after{left:130%}
@media (hover:none),(prefers-reduced-motion:reduce){
 .card-wrapper{transform:none}.card-wrapper .card__media::after{display:none}}